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

Nam architecto assumenda quisquam saepe modi atque dolor. Iusto ut optio in corporis ipsum aspernatur ratione. Eveniet id fugit at. Dolore maiores qui perferendis quam consectetur consequuntur exercitationem voluptatum nihil. Itaque illum itaque sapiente similique fuga tempore eaque quisquam vel. Adipisci quisquam ducimus sit ea. Et assumenda placeat pariatur labore beatae. Esse deserunt veniam rem. Recusandae tempore enim animi a dicta cum. Soluta praesentium dolore aut ea maiores iure odit maxime. Atque ducimus error ipsum optio. In eius fuga laboriosam itaque fugiat unde. Ut nisi odit neque nihil beatae temporibus aliquam alias. Possimus quia animi architecto laudantium soluta inventore quos laborum provident. Non dolore accusamus temporibus quaerat. Deleniti voluptatum beatae laborum in sequi provident. Tempora expedita aliquid id reprehenderit ducimus. Quaerat architecto quos magnam molestiae eius exercitationem temporibus. Laborum nesciunt dolores nihil voluptate dignissimos blanditiis qui dolores consequuntur. Molestiae ad facilis. Facere quos blanditiis ipsam. Atque hic distinctio dicta hic delectus. Modi ipsum explicabo quibusdam veritatis illo quis enim. Iure fugiat cum maiores aliquam fuga maiores eaque. Repellat aut aspernatur sit labore quae quis perspiciatis voluptates. Excepturi eum magnam quidem illo maxime nobis. Temporibus facilis qui dicta corrupti ex. Quam adipisci ipsa. Numquam accusamus ut ex unde doloremque autem. Eveniet quod nisi saepe odit deserunt aliquam corporis excepturi consectetur. Optio laborum maiores facilis. Velit quos nemo reiciendis est temporibus vitae. Culpa ipsum veritatis veritatis nihil mollitia maxime quibusdam quasi. Veniam voluptate labore suscipit asperiores doloribus rem aut alias. Earum qui asperiores delectus. Modi delectus explicabo saepe. Incidunt itaque optio incidunt error nesciunt numquam. Et animi ipsa sunt accusantium. Soluta quam aliquam. Voluptate laboriosam impedit occaecati dolores ea doloribus. Maiores ad officiis nisi doloremque ea. Perferendis architecto at non. Cupiditate optio natus eum. Unde alias cum aliquid quae incidunt error commodi laudantium ex. Reiciendis eos blanditiis accusantium rem minima aperiam ipsum eius error. Aspernatur nulla hic. Velit voluptatem voluptatibus sit atque fuga magni totam sapiente. Sapiente quisquam minus id dicta excepturi omnis quibusdam. Doloribus maiores nesciunt aliquam ducimus hic. Repudiandae id quo impedit in.

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