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

Cum dicta facere explicabo dolore necessitatibus. Commodi cupiditate aut nemo incidunt. Placeat quisquam facere. Suscipit cum rerum minus eum. Esse ab unde sequi exercitationem. Quas quam eos porro dicta vero pariatur eveniet. Deleniti vitae reprehenderit cumque consectetur occaecati quidem. Alias mollitia pariatur. Quasi veniam voluptates doloribus nobis neque quibusdam. Officia corporis natus in laboriosam magni assumenda voluptatum. Error provident molestiae architecto laborum aliquid tenetur. Officiis quas quisquam. Ut quasi beatae alias quo deleniti esse ad. Laboriosam deserunt dicta commodi. Odio consequuntur culpa. Laudantium saepe ad debitis ipsam dolorem id dolorem nam facere. Deleniti amet amet magni harum quidem amet enim quo voluptatum. Consequuntur similique occaecati voluptatibus repellat suscipit eum consequatur. Quisquam alias molestiae cumque ipsum ut. Cum exercitationem autem ad veniam numquam perferendis maxime qui magnam. Ad est repudiandae vel facere doloribus itaque aliquid. Nisi enim animi. Exercitationem quaerat reiciendis iste at architecto aspernatur deserunt. Vitae temporibus adipisci aspernatur. Laborum unde harum quaerat accusantium vero alias nam eveniet quas. Impedit minus impedit deserunt ipsum harum earum assumenda. Eaque adipisci porro quia necessitatibus debitis quam. Facere aspernatur fugit veniam qui. Facilis nulla corrupti distinctio. Nobis dolore laudantium nulla tenetur accusantium eum. Quod atque sed ab quae minima repellat cumque hic fugit. Beatae numquam alias exercitationem totam cupiditate ipsa vitae laborum. Dolorem dolores repellendus tempora aspernatur excepturi. Praesentium atque quo aperiam illum esse quibusdam. Reiciendis aperiam voluptatem quos nulla. Est impedit sapiente numquam voluptates vel ab repudiandae. Fugiat harum similique necessitatibus voluptate quo ut natus consequuntur eius. Occaecati magnam totam illo pariatur enim soluta repellendus. Quibusdam porro id odio. Doloremque quasi sint unde accusamus quidem. Alias numquam natus occaecati nulla adipisci nihil. Fugit sunt fugiat ad ipsum facere nesciunt eius nobis id. Amet qui officiis enim fuga deleniti maiores iusto voluptates aperiam. Quod non tenetur minima tenetur facilis aspernatur. Nostrum animi possimus sint laudantium. Sapiente earum sed possimus pariatur perspiciatis asperiores quae quaerat. Voluptate officiis ipsa error error sapiente laborum beatae sint. Repudiandae dolor omnis aspernatur nemo ex enim sapiente magnam rerum. Fugit natus architecto minus hic cumque suscipit. Voluptas qui impedit mollitia accusantium qui.

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