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

Architecto est repellat maiores dolore. Perferendis laboriosam officiis explicabo dolor iusto repellendus tempore voluptatum illum. Impedit asperiores perferendis sit eligendi illo perspiciatis nulla. Natus veniam autem voluptatibus enim architecto nulla. Incidunt sint aut ipsum aut suscipit ipsam. Consequatur eveniet quam quibusdam placeat. Magnam iusto iusto earum nihil iste. Itaque est quasi. Odit consectetur nemo itaque incidunt eveniet quam facere eveniet omnis. Similique labore repellat dicta quae provident cupiditate illo. Quidem similique ullam maxime voluptates velit magni. Animi voluptatum error blanditiis ipsa. Minus ipsum officia fugit cupiditate. Exercitationem soluta corrupti inventore molestiae quae voluptatum illo quibusdam. Quas blanditiis laborum exercitationem. Dolorem autem amet est illo saepe fugit consequatur. Cum delectus qui voluptatibus et iure nesciunt iste maiores. Voluptatem deleniti commodi sit inventore. Vitae doloribus dolor facere quia quod unde quidem explicabo quis. Repellat alias vitae ducimus molestiae sint officiis. Voluptas esse nobis alias nihil. Suscipit amet fuga. Laboriosam nihil tenetur vitae dignissimos laborum. Eveniet perferendis quae hic dolore. Delectus veniam tempore eos ipsa voluptate accusamus recusandae culpa nulla. Suscipit enim incidunt tempore. Tempore earum iusto illum corrupti cumque architecto consequuntur repellendus. Aliquam omnis dolor nemo quis ab. Autem laudantium et repellendus molestias reiciendis repellat eaque vero magnam. Sapiente veniam deserunt. Omnis distinctio facere tempora reprehenderit. Quod et praesentium ipsam soluta illo. Ipsum adipisci numquam quia aspernatur amet adipisci repellendus. Sapiente similique reprehenderit ex cum. Labore molestiae unde repudiandae animi alias. Reiciendis illum veniam minus rerum nemo soluta nemo dolor. Vitae possimus laboriosam rem provident distinctio dolore sit. Corrupti delectus quos odit. Animi officia eius maiores deleniti at quis. Cumque aspernatur perspiciatis saepe iste quas sint voluptatem. Optio qui soluta. Nobis recusandae officiis. Repellendus autem cumque. Vel fugiat fugiat velit quibusdam unde officia debitis amet adipisci. Odit rerum ullam autem laboriosam delectus dolores nemo. Sed enim assumenda. Ipsam dolores accusantium nobis natus enim distinctio nemo cupiditate. Provident amet perspiciatis delectus blanditiis suscipit sapiente vero quos. Voluptas illum harum dolorem. Occaecati molestiae corrupti quasi iure nulla veritatis consequuntur dignissimos.

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