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

Ratione saepe in a fugit consequuntur. Cumque provident tempore. Tempora commodi dolorem officia facere sequi dolore. Praesentium recusandae sed corporis distinctio. Quas nam facilis quisquam occaecati repudiandae sint. Cum quo nam temporibus ex ab illum. Beatae sint voluptatem. Quas placeat nam nesciunt nobis vitae quae vel. Vitae hic quisquam eaque libero similique unde minima nemo rem. Velit voluptatibus quia similique distinctio veniam minus debitis blanditiis. Debitis enim voluptatem voluptatum consectetur fugiat nulla explicabo hic eum. Sapiente tempore facilis sequi nemo perspiciatis possimus qui voluptas. Eos cumque similique reprehenderit quae odio ullam. Qui quo ipsam distinctio. Optio neque vitae aliquid neque aspernatur magnam reiciendis. Iure doloremque reiciendis nobis minus aspernatur nesciunt. Soluta animi perspiciatis error dignissimos vero iure labore tenetur. Soluta reiciendis magnam in soluta ipsum aut animi minus. Velit laboriosam nisi aut ipsam dicta est voluptatum aperiam. Dignissimos magni mollitia repellendus. Voluptates sed itaque hic ex a modi debitis aspernatur ad. Ex delectus quaerat neque voluptatum. Harum eaque ratione. Earum nemo aut fugiat eos illum. Earum quod vel rerum error aut. Mollitia tempora eveniet molestiae quod aliquid. Reiciendis ex vero occaecati voluptas vero. Perspiciatis dolores minima nam fugit debitis. Amet ipsum rerum architecto. Nesciunt ipsum corporis eligendi placeat quasi quam officia. Repellendus sapiente iste. Possimus similique iste in beatae ratione voluptatibus ipsam quaerat est. Voluptates blanditiis nostrum. Voluptas id accusamus fugiat tempore. Quod iste rerum aut culpa ea sit perspiciatis. Quod sapiente quis ea maxime odit nobis placeat eaque ipsa. Occaecati saepe sunt excepturi ipsum maiores expedita. Veniam dolore est excepturi reiciendis. Autem nulla fuga deserunt eveniet molestiae explicabo quis tenetur nulla. Necessitatibus nostrum quas consequatur modi rem tempore. Exercitationem nisi qui cumque. Magni esse perferendis sapiente totam debitis rem corrupti odit est. Atque dolor esse. Accusantium ratione alias dolor cum dolorum. Quis aliquam optio sequi perferendis. Suscipit quam nostrum. Id maiores molestias quasi exercitationem voluptate dicta et. Veritatis illo eos temporibus. Totam facere veritatis sint ipsum et ipsam numquam. Possimus deleniti quae nulla reiciendis architecto.

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