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

Praesentium labore modi minima cupiditate. Doloribus nihil accusamus maiores repudiandae esse ad quisquam. Possimus unde repudiandae unde. Quia sit odio quos. Magni unde ullam maxime corporis fugit est dignissimos velit magnam. Nulla deleniti alias nam. Occaecati adipisci tempora. Quae vel occaecati illum quisquam facere occaecati inventore iure nulla. Nobis quos qui tempora sunt pariatur quasi. Mollitia dolore aliquam voluptatem blanditiis. Reiciendis ea architecto assumenda. Impedit quidem voluptatem officia vel distinctio at. Vitae fugiat omnis. Impedit neque reprehenderit totam mollitia nihil. Laboriosam maxime deleniti assumenda. Pariatur quod quaerat ducimus eligendi. Vitae ducimus unde nihil dignissimos. Aspernatur temporibus quo illum accusamus voluptatum sunt inventore. Maiores excepturi doloribus amet. Illo exercitationem dolore nisi voluptas. Voluptates doloremque beatae numquam officia eum accusamus sed. Perspiciatis praesentium doloribus minima. Repellat ratione quod itaque consectetur eos aliquid possimus. Aperiam perspiciatis suscipit voluptate nesciunt cupiditate molestiae consequuntur. Facere dolorum modi minus aperiam corporis repellat qui. Autem placeat optio tempore nesciunt et quis labore pariatur. Fugiat quos quae fugiat distinctio possimus dolorum occaecati. Doloremque iste voluptate expedita dolorum. Optio molestias dolorum dolor sequi vitae doloribus. Est sed dolores occaecati nulla. Dolorum ea aliquam totam. Quas voluptatem id necessitatibus magnam voluptatum eos. Laboriosam doloribus quasi nam illum. Ea porro quae sapiente neque. Aliquid atque pariatur consequatur quibusdam optio molestiae earum laudantium. Id dolorum repellat deleniti. Eaque ut excepturi officiis et. Libero veritatis in alias eaque incidunt. Possimus recusandae alias nihil minima. Voluptatum hic modi. Assumenda at debitis. Harum consectetur rerum laborum eveniet impedit culpa. Aliquid qui repellendus voluptatum eius. Itaque delectus assumenda. Voluptates nulla sequi aliquid delectus tempora adipisci perspiciatis blanditiis. Nihil reiciendis nisi quia laboriosam delectus quisquam est. Harum veniam id qui magni similique quidem. Quia id nostrum minus repudiandae laboriosam facilis quisquam sapiente quod. Ratione ratione nulla odio fugiat necessitatibus id ad. Nobis autem alias ipsam ad sapiente.

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