Tailwind

Core

Provides a variety of globally scoped styles.

Source Page Source

Body Background

Your app's background is automatically set via a design token class. Adjust your theme's color scheme to customize. This affects both light and dark mode.

css 
body { @apply bg-surface-50-900-token; }

Selection

Selection color is also set via a token class. Try selecting the text in the card element below to preview this styling. Notice how selection color changes depending on the background.

The quick brown fox jumps over the lazy dog.

Try selecting the text above.

Mobile Focus

Interactive elements on mobile will briefly show a focus style when touched. Skeleton adjusts the coloring.

Scrollbars

Skeleton automatically provides custom scrollbar styles in supported browsers. Use .hide-scrollbar to disable scrollbars.

Test Scrolling Here

Eos voluptate occaecati molestiae repellat suscipit. Fugiat provident vero amet tempora occaecati eveniet soluta rem. Consequuntur harum quidem adipisci maxime ullam soluta. Autem aliquid nisi dolores deleniti a laborum voluptatibus. Ad eius nobis velit recusandae quam dolor laboriosam adipisci. Velit eos quae eligendi sapiente eveniet fugiat in tempora vel. Fuga voluptates maxime sequi. Illo eaque sint cumque autem tempora. Illum voluptas eveniet sint molestiae impedit pariatur fuga. Asperiores sint itaque nostrum illum corporis voluptas ut est sequi. In dicta expedita earum ab. Sit minima amet laboriosam vitae iure deleniti. Sit molestiae ullam occaecati porro. Non fugiat ad odio optio voluptates deserunt autem libero. Asperiores iure provident provident consequuntur tempore nisi error nemo consectetur. Alias cumque deserunt est tempore. Cum non laboriosam. Odit quidem reiciendis praesentium quidem fugit maiores fugit beatae sunt. Eos adipisci doloremque doloremque in. Reiciendis quis illum alias fugit error. Saepe sapiente totam. Consequatur et accusantium vitae laboriosam optio. Suscipit impedit aliquid distinctio aperiam. Maxime fuga consequuntur. Minima neque tempore rerum magnam explicabo aspernatur. Commodi eveniet nisi voluptatum magni. Atque ab sint quod. Et itaque a ea perferendis provident. Voluptatibus vel aspernatur temporibus voluptatum sapiente. Reprehenderit autem voluptatum. Quis ipsum nihil labore eum minus veritatis voluptatem. Accusantium ex quis necessitatibus exercitationem accusamus repellat. Rerum hic esse. Animi ut ea error saepe nobis sunt voluptas debitis sunt. Molestias voluptatibus eligendi. Earum consequuntur illo aspernatur quia officia assumenda earum. Aut consectetur expedita. Necessitatibus saepe corporis provident enim totam vel. Sapiente doloribus alias modi sunt tenetur. In error vel odio quod eaque vitae. Esse repellat alias rerum omnis. Dignissimos commodi quasi id neque libero. Veritatis repudiandae tempore nulla itaque. Quidem qui animi ducimus pariatur. Corrupti deserunt totam officia placeat facere sit. Velit veniam magni sit error soluta praesentium nisi. Iste ab ea id expedita est non maiores. Accusamus quaerat temporibus nostrum nobis quia possimus. Assumenda nesciunt velit alias recusandae autem earum. Explicabo adipisci rem quas.

Dividers

Native hr horizontal rule elements respect your theme settings automatically. Use border size to adjust the width.

Divider Styling

Dividers may be dashed, dotted, or doubled.

Vertical Dividers

Divide columns with the .divider-vertical class. You can apply it with a span tag. Adjust the height as desired.

Left

Right