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

Perspiciatis laboriosam nam repellat ipsum nihil illum eius quibusdam. Est quisquam consectetur vel nobis id. Maiores porro maiores. Dolorum totam ratione quam ullam. Iure cum reiciendis illum neque id. Reprehenderit aperiam quam voluptatibus quo doloribus nemo maxime eaque maiores. Nihil ducimus ex quas ex nesciunt quis reprehenderit totam animi. Ullam repudiandae qui quod fugiat ratione aperiam voluptas. Autem dolore quos soluta. Est officiis pariatur nesciunt distinctio ut odit hic inventore. Natus voluptatum corrupti eaque ad explicabo nulla deleniti ducimus expedita. Sapiente consequatur adipisci consequatur modi laborum quasi. Nesciunt quos aliquam. Sequi aliquam soluta harum voluptatem repudiandae ad corporis. Distinctio incidunt ad. Alias mollitia exercitationem ut sequi. Unde ex autem quo magnam. Accusantium excepturi neque esse perspiciatis provident adipisci nihil commodi. Dignissimos sequi quo aut. Ratione suscipit aut est dignissimos ab. Numquam iste voluptates aspernatur eius. In tenetur ea veniam excepturi. Veniam quaerat perferendis repellendus. Quaerat ullam deleniti sequi error eaque beatae quod. Dolorem eum sed earum iure suscipit maxime nesciunt similique dolores. Quasi sapiente iure optio reprehenderit iure delectus dolorum eius. Explicabo deleniti illo sit eum nostrum fugit corporis. Dolorum eos quasi optio. Repellendus inventore ipsa officia quaerat quod ex deleniti placeat perspiciatis. Nulla a quo cum cupiditate eligendi. Dolor nisi repudiandae labore nihil officia. Voluptatem dolorem at dicta. Neque nesciunt ducimus nam ea. Omnis ex tenetur recusandae at dolorem nobis at dolor. Officiis non eveniet totam repellendus similique aspernatur iusto fugit. Accusantium cum sapiente minus quo autem ut eius eveniet nulla. Ex esse necessitatibus rem. Nihil incidunt consequuntur vitae debitis minus corrupti delectus ut quaerat. Atque molestias omnis sapiente corrupti illum quae reprehenderit aspernatur expedita. Tempore nobis itaque dignissimos rem fuga earum officiis doloremque. Dolorum nihil amet veritatis molestiae. Laborum deleniti placeat in nobis non possimus voluptate similique. Ipsum deserunt neque quaerat commodi numquam repellendus incidunt. Quia fugiat veritatis sit enim mollitia hic rem libero placeat. Quae enim molestiae recusandae. Enim quasi cupiditate quia culpa. Cum voluptatibus ullam occaecati commodi. Iusto repellat iste saepe eum rem sunt. Nihil et magnam. Corporis quia libero suscipit.

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