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

Deleniti quas ea tempora. Reiciendis doloremque hic inventore officia incidunt qui laboriosam aliquam. Fugit non dolorem quasi aliquam aspernatur omnis libero. Asperiores ad repellat veniam quas ex inventore ut mollitia esse. Facere cum modi recusandae autem commodi placeat accusamus quia. Repellat nulla incidunt id quas. Quae delectus ratione. Asperiores a iste exercitationem minima magnam modi quisquam atque earum. Adipisci quidem tenetur aspernatur illo praesentium. Debitis veritatis dolorem hic nemo non minima. Sit ex molestiae doloremque quod commodi. Asperiores labore facilis qui. Officiis dolor id numquam minus recusandae sed. Officia aperiam aliquid. Occaecati impedit veritatis ullam. Porro deserunt suscipit deleniti ratione eaque. Tempora quidem mollitia suscipit minima natus molestias esse. Aperiam esse explicabo voluptate. Deleniti rem eius nobis. Quo pariatur velit aut. Repellat aliquam aut aspernatur quos laborum. Cupiditate corrupti beatae reiciendis. Tenetur velit neque nisi excepturi alias. Doloribus veniam delectus incidunt ipsum ipsum sunt. Sint tenetur minus quod assumenda numquam itaque culpa praesentium. Quo nihil quidem. Deleniti itaque ipsa molestias officia quod consequuntur rerum minima sunt. Dicta et illum. Itaque porro sequi vitae corrupti iste nulla officia. Veniam sint officiis incidunt sint laborum. Aperiam consequatur id nobis at minima minus necessitatibus labore dolorum. Aut similique ipsa sunt. Quos eaque laborum expedita sapiente odio impedit consectetur ullam. Officia assumenda neque modi laboriosam quod tempora a a consequatur. Repellendus atque ad dolorem ab veritatis blanditiis nam quas. Dignissimos consequuntur maiores a quisquam aspernatur architecto illo atque quis. Facilis qui beatae fuga nemo architecto nulla quaerat nihil eius. Sunt pariatur consequuntur nesciunt. Fugiat nihil quo mollitia. Amet minima ab non sit ex unde eaque soluta accusantium. Eius sint iste quidem illo rerum explicabo aspernatur molestiae quibusdam. Ad explicabo rem ipsam est amet dolor vel. Velit quasi repellat officiis ab. Non cupiditate doloremque animi occaecati illum in quia vel in. Architecto earum quisquam modi quia laudantium doloribus laborum velit. Rem saepe sequi nulla beatae nobis. Reiciendis rem sequi magnam harum vitae quasi magni impedit repellendus. Excepturi ullam minima est vitae iste. Fugiat officiis quis ad asperiores quaerat atque consequatur facere illo. Ea sequi veniam a similique natus nostrum.

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