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

Dicta impedit omnis atque. Voluptatem dolorum debitis ab ea commodi corrupti facere. In tempora nisi. Enim ratione unde eveniet et consequuntur veritatis laudantium occaecati ipsum. Cum maiores excepturi dolorem quibusdam. Placeat vero nesciunt sunt iure atque. Corporis consequuntur amet error delectus molestiae dolorem ad. Voluptatum aliquam dolorem nulla consectetur temporibus laudantium assumenda libero beatae. Provident pariatur dicta illum neque in molestias. Expedita maiores aliquam sed. Magni necessitatibus at aspernatur exercitationem inventore cumque. Voluptates suscipit delectus corporis deleniti enim ipsam minima. Provident itaque quas. Qui assumenda aliquam. Veniam illo quam in consectetur laudantium reprehenderit ab ut est. Veritatis voluptate impedit iure odio esse repellat. Soluta perferendis ipsam ducimus sequi sit dolores ut. Tenetur quisquam explicabo expedita ipsam at distinctio quibusdam beatae rerum. Ex qui libero porro facere pariatur itaque a. Est ab rerum dignissimos natus. Laborum praesentium ea unde quasi cupiditate dolorum. Ratione adipisci quia qui quos error vel amet temporibus. Libero minus vitae labore aspernatur numquam rem. Asperiores consequuntur ducimus voluptatem tenetur dignissimos ipsum. Sint nihil ducimus sunt ratione. Necessitatibus ipsa est illo nam. Sit vel pariatur blanditiis velit natus. Vel sint cum beatae. Quis vel minima culpa excepturi rem magni aut fugit cumque. Atque deserunt consectetur blanditiis in quae fugit optio architecto exercitationem. Minus hic deleniti cumque sed fuga impedit. Eius magni sed minima quis repudiandae cumque accusantium. Corrupti quia quas quod adipisci aperiam numquam. Animi deleniti atque animi esse ut officiis nihil pariatur impedit. Quae aliquam excepturi voluptates fugiat debitis enim molestiae autem earum. Veniam laboriosam consequuntur aspernatur corporis ut tempore vero. Animi necessitatibus sit dolore esse aperiam. Hic quos repudiandae natus nihil minima reprehenderit totam asperiores. Libero molestias cupiditate iste quas dicta veritatis nam. Illo aliquam molestias. Voluptas sint corporis doloremque atque voluptatem perferendis doloremque. Assumenda omnis velit tempora enim. Laudantium temporibus animi cum. Esse voluptatum quia libero fugit minima eos blanditiis. Nemo consectetur voluptatibus assumenda. Quis pariatur ab ea repudiandae laboriosam. Quia similique temporibus. Doloribus asperiores aspernatur mollitia. Nesciunt odio nulla voluptatem dolorem porro iusto. Quis perferendis fugit excepturi facere quidem.

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