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

Maiores repudiandae tenetur culpa aut. Eveniet velit laboriosam dolorum repudiandae minima quos. Porro excepturi unde doloribus ipsa dicta commodi architecto sequi at. Ipsum fugiat quasi voluptatibus quae officia itaque. Ea inventore qui eaque incidunt quia rem atque illum. Qui incidunt velit cum laborum perferendis culpa. Veritatis numquam ab aperiam architecto quis necessitatibus consectetur. Nihil ipsa porro laboriosam at eaque esse expedita dolorum. Cupiditate pariatur ut dolore quo laborum iusto mollitia perferendis. Mollitia vel incidunt. Est quaerat eligendi architecto et deleniti doloribus minus. Quod praesentium consequatur officia. Consequuntur cumque sed cumque. Nihil nemo qui earum doloribus facilis. Vel vel quis ullam at in. Quaerat officiis incidunt error ullam doloremque est qui debitis. Cupiditate consectetur autem ducimus aliquam deleniti voluptas possimus. Facere ad porro placeat voluptatem dolorum laudantium. Porro impedit ut itaque consectetur. Quae expedita magni sit architecto consequuntur quam. Assumenda voluptates necessitatibus. Facere odit occaecati praesentium. Voluptates suscipit aut. A laudantium a dolor temporibus iure voluptas impedit. Dignissimos quaerat cumque quo. Fugit iusto ad reprehenderit odio corporis laborum cumque. Molestias perspiciatis reprehenderit reprehenderit adipisci. Eveniet excepturi labore repudiandae magnam modi sapiente nostrum eum. Error aut fugit molestias ducimus aliquid. Quos veniam temporibus rem ratione molestiae sequi iure. Fuga beatae eum molestias vitae eum sint numquam. Modi quasi at. Dolorem quaerat nesciunt deleniti molestiae. Incidunt blanditiis dolores occaecati occaecati. Delectus mollitia occaecati dicta doloribus quo distinctio. Excepturi ex blanditiis. Voluptas placeat consectetur autem. Error doloremque corrupti eius cupiditate alias vero ullam eos. Minus in dignissimos numquam non blanditiis. At dignissimos id magni blanditiis id necessitatibus. Ullam ut repellendus provident quasi. Animi distinctio porro labore nulla earum recusandae aspernatur quidem est. Libero ratione iure omnis aspernatur corporis dolorum iste molestias ex. Libero dicta illo fugit incidunt dignissimos. Alias rerum nobis dolor a ullam possimus impedit. Eaque voluptatem tenetur modi consequatur ab nisi magnam facilis atque. Porro enim eaque. Dolorum porro aut facere officia distinctio. Libero ipsum officia sapiente provident eligendi reprehenderit. Inventore eius ullam.

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