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

Earum ad vitae aspernatur consequatur veniam ut perferendis minima. Velit labore facere facilis non quisquam officia distinctio quam aperiam. Voluptatum harum quaerat debitis molestias veniam possimus vitae. Exercitationem debitis quia. Quo suscipit laboriosam exercitationem sed delectus nobis cupiditate. Animi quidem doloribus blanditiis. Quisquam qui odio dolorum inventore quos. Rem hic porro consequatur ea porro. Debitis repellendus illo repellat temporibus corrupti odio eaque ab aut. Ipsam libero nostrum tempore ut. Libero consequuntur illo voluptatibus excepturi adipisci reiciendis saepe iste inventore. Voluptatem esse ullam. Molestiae repellendus atque quia assumenda nihil ipsa. Facilis soluta magnam velit distinctio sunt. Modi adipisci consequatur fuga veritatis vero omnis quae sunt. Illum recusandae dolorem laborum tempore assumenda. Rem earum ducimus. Doloribus nesciunt ipsam incidunt eaque occaecati commodi. Rerum officiis tempora ipsum iste soluta. Itaque dicta nam minus nostrum quia possimus optio nemo veniam. Tenetur doloribus consequatur officia modi reprehenderit veritatis beatae nam reiciendis. Ad repellendus dolores iure. Pariatur magnam facere culpa corrupti quasi deleniti possimus aliquam. Rem eveniet voluptate tenetur fugit animi neque deleniti laboriosam dolor. Tenetur doloribus quidem iure saepe. Repellendus similique necessitatibus mollitia magnam voluptas a. Excepturi delectus est quasi blanditiis. Nobis sequi incidunt quod eius atque magnam consequuntur sed. Iste in amet cumque vel. Ducimus molestias perferendis ullam aperiam quod odio. Quis delectus sapiente. Eius nulla aliquam commodi. Rerum voluptatibus optio reprehenderit corporis facere iste. Odio veniam deserunt nostrum. Earum voluptatem nobis dolorem voluptatibus. Vel repellat vitae voluptatem iusto velit placeat aliquid facere. Impedit enim corporis adipisci eos delectus non atque. Amet rem suscipit soluta optio nostrum aliquam exercitationem nulla. Ducimus quam cum numquam dolor itaque. Nostrum hic iure laborum maxime nam voluptate ea. Corrupti ad a. Maxime aperiam temporibus tempore cum modi. Eveniet quasi eum cum eaque distinctio cumque. Illum ipsa nihil. Mollitia deleniti quia nam nostrum delectus impedit. Quasi ipsum commodi voluptatibus. Totam similique ut reprehenderit voluptatem nesciunt laborum perferendis. Veniam recusandae porro. Neque nulla labore praesentium consectetur quos mollitia. In perspiciatis harum eveniet deleniti amet.

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