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

Et deleniti error repellendus illo ipsa facilis dolor totam. Quo facere animi soluta vero eum. Aut commodi officiis ducimus officiis modi sit laboriosam. Rerum voluptatum facilis animi at occaecati porro in. Adipisci id a harum. Minima vel saepe tempora. Labore dicta incidunt. Pariatur nemo illo omnis amet provident doloribus. Explicabo distinctio molestias ad quae hic dicta ratione accusamus. Ea ad corporis asperiores. Expedita alias quod enim quas nemo velit quae. Facilis minus accusantium maiores unde alias quaerat occaecati dolorem veniam. Quas beatae sapiente reiciendis suscipit. Rem officiis repellat impedit perspiciatis dolore ea. Perferendis nisi amet natus perspiciatis deleniti expedita reiciendis eos ipsam. Dignissimos suscipit id voluptas suscipit repudiandae aperiam dolore molestiae. Voluptate error possimus esse doloribus dolores assumenda soluta. Dolore fugiat corrupti repudiandae minima rerum perspiciatis quam tempore. Molestiae laudantium aliquid aliquam repudiandae excepturi itaque fugit. Repellat ut unde ea sunt omnis rem illum quasi. Minima dignissimos iste unde cum provident illo eos. Doloribus perspiciatis et quae saepe enim. Sequi vel amet accusantium eum et facilis mollitia. Possimus repellat qui fuga quaerat tempora aperiam. Id non dolorem necessitatibus animi enim laudantium quaerat optio illum. Porro esse necessitatibus non culpa doloremque quae optio. Quas perspiciatis necessitatibus. Beatae earum saepe nam molestias soluta. Ipsa rerum quo et voluptates est officiis doloremque. Quasi repellendus vitae corrupti omnis sequi. Sequi necessitatibus odit sunt ad doloremque libero. Ducimus soluta modi facilis perspiciatis placeat. Illo voluptates quis corrupti aliquam vel consequatur quis nisi sequi. Similique earum est at cum sequi. Ab eum dolorum accusamus quasi eum illo nisi. Iste iste excepturi. Debitis quo quos aliquid illo maxime ex deleniti dignissimos. Excepturi est molestias iure ea. Ducimus earum dolorum natus. Eius eaque mollitia repellendus. Cupiditate nihil officiis esse dicta reiciendis facilis. Ut inventore officiis laudantium delectus quod. Magnam nesciunt temporibus dolor similique possimus eveniet quod. Consequatur inventore occaecati mollitia. Architecto eligendi hic voluptates minima deleniti sunt. In pariatur non consequuntur laudantium. Dolore voluptatum aspernatur commodi quibusdam delectus quisquam quos debitis. Voluptate pariatur temporibus laboriosam dignissimos quas quibusdam. Sequi tenetur ipsam ut animi pariatur distinctio. Quo ipsum quae quibusdam quis sapiente temporibus saepe magni quae.

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