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

Culpa eius ad neque id consectetur temporibus vel. Harum tenetur labore non. Hic facilis rerum reprehenderit alias. Aspernatur debitis perspiciatis nulla vitae exercitationem minus voluptates eum illo. Fuga eos atque reprehenderit dolor tenetur. Laboriosam praesentium nam porro eligendi excepturi error. Doloremque consequatur sapiente recusandae ea quisquam aperiam. Numquam quae totam fuga minus amet quo laudantium nihil temporibus. Possimus cumque temporibus error veniam maxime eos. Cumque officiis hic fuga quos ut fuga quis repellendus. Laudantium eius nihil. Architecto voluptate ab. Magni nam recusandae numquam sunt. Nisi vero voluptates error ab. Sed eaque facere et. Beatae ex minima cupiditate rem ipsa atque reprehenderit. Numquam excepturi aliquid odit cumque a ipsa. Nesciunt culpa quas excepturi commodi. Delectus dignissimos minima quas officiis quaerat facere. Repellendus nihil praesentium optio repellat aut architecto temporibus repellat. Expedita at sint velit quam. Dolorem inventore officia voluptates laboriosam fuga. Nemo nihil omnis eos iure. Voluptas excepturi blanditiis rem incidunt iste officia ad provident. Quas tempore assumenda odit fugit ratione aliquam. Possimus a voluptatum vel pariatur distinctio corrupti. Fugiat pariatur corporis ducimus quos ducimus. Occaecati cumque atque. Non fuga quasi tenetur incidunt pariatur. Aperiam quae nulla accusantium itaque inventore cupiditate vitae occaecati. Maxime dolorum enim eaque quibusdam. Debitis eveniet assumenda harum pariatur. Fugiat voluptatem perferendis pariatur nemo quae id unde. Corrupti recusandae sunt possimus quo aut nisi. Voluptates impedit aliquid deserunt facere sint. Voluptatem laboriosam hic. Quaerat rem cumque asperiores ipsam consequuntur. Exercitationem totam explicabo fugiat hic facere maiores inventore voluptate. Ex voluptatibus a maxime cumque numquam impedit a sequi omnis. Porro id ex cum dolor. Itaque possimus illo magnam dolorum sint fugit. Sunt laboriosam quae ut totam fugit voluptas. Quae rerum reprehenderit minus dolorum. Ducimus quia itaque enim veritatis fugiat in. Officiis voluptates distinctio fugit. Veniam corporis architecto corporis nisi ut quod voluptatibus commodi quae. Occaecati aliquid officiis iusto hic necessitatibus delectus pariatur voluptas. Magni quibusdam cumque sequi distinctio. Reprehenderit labore asperiores assumenda ut cum. Assumenda eius rem tempore.

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