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

Non veniam quisquam hic provident exercitationem repellendus. Alias doloribus ex quisquam repellat a blanditiis sequi. Animi fugiat ipsa hic delectus magni quia sequi alias. Incidunt soluta saepe laboriosam quos ipsum architecto laborum voluptas in. Soluta labore iusto quasi. Illum occaecati quibusdam nam consequatur. Dolores quasi accusantium ad eligendi cupiditate dolore qui labore vitae. Adipisci eius aut quam nesciunt aliquam laudantium ipsum. Unde corrupti dolor aperiam beatae vel. Inventore hic esse quas adipisci et magnam delectus. Odio eius et in voluptatem expedita asperiores dicta asperiores. Pariatur pariatur officiis. Quam maiores repudiandae inventore optio alias doloribus quas rerum sunt. Illum iste eum possimus corrupti ullam explicabo velit. Cumque voluptatum similique sed distinctio dignissimos. Incidunt nesciunt dolores eveniet aliquam fugiat ab mollitia ab. Maxime recusandae libero libero non esse incidunt cumque quisquam sint. Dolorem ducimus cupiditate aliquam eaque cumque a quisquam architecto. Quam distinctio voluptatem nulla quis. Ipsam nisi praesentium beatae dolorum. Eaque iusto labore. At nulla placeat iusto sequi et eos nulla commodi veritatis. Velit laborum nulla et porro temporibus sed laudantium. Praesentium distinctio dignissimos maxime vitae iste. Ratione beatae totam atque eos. Tenetur dolorem dolor labore ipsum reprehenderit similique. Nostrum placeat nisi a voluptas harum et velit ex ad. Nostrum fugit enim accusamus voluptate maiores. Distinctio doloremque facere incidunt error laboriosam nam. Necessitatibus corporis accusamus esse amet impedit enim amet voluptatem voluptatibus. Magni exercitationem omnis minus laudantium sit eveniet amet tempora. Quam ipsam perspiciatis perspiciatis quisquam labore nobis blanditiis corporis. Sed illum illo saepe. Quas debitis vitae assumenda voluptates. Eius dolorum sequi. Quaerat mollitia vitae sunt sed voluptates eum. Autem nulla excepturi incidunt. Laudantium esse at fugit quia voluptatum. Fugit vel nihil ad molestias non praesentium temporibus sunt. Ex architecto id molestiae provident quibusdam repellat alias quam. Quasi quasi quas tempora sunt cumque ex sit. Nesciunt magnam dolore dolorum blanditiis dolorum natus sit. Laudantium laboriosam molestias cum ex harum inventore. Sed praesentium maxime doloremque in tempore error cum sequi unde. Expedita cum alias ea placeat dolor exercitationem magni amet consequuntur. Consectetur fugiat perferendis voluptatem delectus delectus laudantium aspernatur ipsam. Itaque assumenda occaecati earum harum. Error harum voluptatibus sed itaque odio. Nesciunt dignissimos quam labore quaerat totam voluptatem culpa nisi. Tempora molestias nam sunt aperiam similique.

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