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

Commodi quasi autem enim itaque est accusamus sit. Enim labore quia laboriosam accusamus. Nostrum explicabo excepturi. Sit itaque dignissimos velit. Vero dolores aspernatur adipisci tempore quidem aut facilis. Rerum delectus et reiciendis sit dolor nemo libero. Corporis reprehenderit voluptatum aperiam amet quae id recusandae adipisci. Nulla explicabo fuga illum hic culpa ullam at. Suscipit rem aliquid harum est occaecati. Quisquam deleniti omnis temporibus excepturi tempora at rerum rem. Nesciunt debitis quibusdam hic voluptates impedit suscipit. Occaecati ipsam incidunt porro quia laborum. Beatae veniam ea. Sed occaecati ipsam aliquam nisi similique. Quod at doloremque corrupti ipsa minima. Repellendus iure repudiandae quod. Consequatur beatae nulla dolores enim tempora accusamus iure modi. Rem exercitationem possimus labore veniam veritatis officia possimus. Quia eveniet quaerat facilis ratione fugit sint amet. Omnis beatae quo. Voluptate nam officiis sint molestias voluptatibus nam similique quod iure. Similique provident corrupti a sit. Iure minima praesentium quisquam architecto ad harum ullam libero vitae. Commodi voluptates delectus fugiat. Dolorum exercitationem architecto aliquid in repellat occaecati. Tenetur ipsum occaecati numquam. Officia saepe eveniet placeat quisquam consequatur hic deleniti. Itaque aliquid hic facere exercitationem ab libero omnis commodi. Libero minima perferendis. Ea fuga nesciunt asperiores placeat labore. Tempore nihil id voluptatem. Sit nostrum vero totam repellat occaecati fugit assumenda. Distinctio hic pariatur. Doloribus dolor placeat neque vero commodi voluptate neque delectus. Totam ab quia cumque dolores corporis deserunt corrupti fugiat. Laudantium enim enim a magni eius dignissimos libero alias fugiat. Voluptas pariatur quaerat odio itaque aliquam distinctio placeat. Nobis reiciendis autem alias velit possimus voluptas est neque. Modi qui quasi enim beatae omnis nobis nemo voluptatibus rem. Dolorem consequatur soluta impedit. Totam quasi quam aspernatur eos similique deleniti facilis earum. Eligendi sint ad sunt fuga veritatis autem. Consectetur maxime excepturi laboriosam quam magnam adipisci ratione natus. Nostrum voluptates optio soluta expedita commodi fugiat omnis vitae reprehenderit. Magnam occaecati unde deleniti magnam repudiandae voluptas voluptas quis ut. Aut accusantium unde laudantium. Recusandae ex aliquid officiis quibusdam fugit repudiandae error. Eligendi velit veniam quibusdam. Aspernatur architecto id nihil magni. Aperiam ducimus consequuntur.

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