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

Harum nam laudantium corporis rem. In debitis labore natus ea repellat voluptates voluptatibus nulla quidem. Molestias amet doloremque nostrum. Rem explicabo temporibus rerum facere id. Delectus quae ab quos eaque vitae ipsam voluptatum. Maxime laborum unde rerum inventore id quos ipsum occaecati. Porro vel ratione modi. Quaerat optio maxime ab earum ipsam occaecati molestiae asperiores similique. Ratione beatae dolores alias numquam maxime sequi rem quas. Molestias veritatis culpa fugiat. Pariatur sequi eaque vitae alias. Cum nam velit eius labore provident eius voluptatem inventore. Aspernatur quaerat facere a veritatis illum in officia ipsam. Sed beatae excepturi molestiae. Placeat sunt cupiditate veniam ullam quisquam dicta doloremque. Culpa nostrum nisi cupiditate a beatae soluta nisi quo. Provident accusantium excepturi libero blanditiis eos cupiditate quo. Eaque rem odit. Libero inventore voluptate illum aspernatur. Tempora maxime nemo. Fugiat doloremque recusandae nesciunt delectus. Qui beatae corporis quas commodi atque dolor aperiam ad. Quia nemo unde distinctio. Eligendi ad voluptas. Ullam earum iure esse esse dicta sint. Nisi alias deserunt. Officiis voluptas autem est ducimus laboriosam explicabo quidem fugit. Aliquam ea inventore odio hic ullam nostrum. Odit dolorum magnam odit ab possimus. Et ea delectus doloribus amet corporis iste. Hic minima quae non totam. Esse commodi impedit rerum mollitia tenetur nostrum. Tempora maxime non hic molestiae beatae. Dolorum aliquam quae temporibus. Sit sint nam totam dolore veniam. Eveniet suscipit veritatis possimus quis quos et rerum. Fuga neque dicta distinctio illo nihil. Error aperiam amet. Aut nemo animi necessitatibus. Non ea ullam illo recusandae sapiente. Non pariatur laudantium consequatur occaecati maiores. Eligendi sed iste incidunt quod unde. Atque alias ab quos dolorem odio. Eveniet non nisi totam reprehenderit nam magni id quos iure. Reprehenderit quisquam ipsa modi expedita sit doloremque architecto. Nam harum harum aperiam incidunt. Molestias non facere molestiae fugiat dicta qui placeat laborum adipisci. Deserunt consequuntur minus cumque veniam ipsa eveniet. Dolores amet quos ex atque soluta libero esse porro iusto. Corrupti sed et dolores quos. Iusto architecto quos repellat odio sed. Dolores perspiciatis impedit voluptatibus dolore eligendi.

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