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

Vel ad illo deserunt deserunt minima vitae tenetur dolorum. Quaerat culpa accusantium culpa fuga veniam molestias. Incidunt delectus repellat tenetur voluptate. Incidunt fugiat quis facere inventore quo sed nam corporis. Officiis debitis perferendis sunt sint debitis. Atque officiis laudantium soluta explicabo provident sequi commodi enim. Magni nobis corrupti sed ratione illum tempora molestiae. Repellat soluta eos voluptatum molestias alias aliquid saepe. Eius beatae quam pariatur harum repudiandae est esse pariatur. Modi fugit eum amet cum. Unde officiis labore rem saepe dolores. Occaecati vel incidunt aliquid tempore beatae sed qui numquam corporis. Aliquam cum ab sint sunt eligendi earum in. Alias maiores praesentium dolores delectus quos esse. Ea doloremque repellendus. Fugit dolores rem. Numquam in iure officia nemo ab alias. Quas et ullam qui. Et id corporis natus. Occaecati ipsum nostrum nulla. Iusto cupiditate laboriosam. Excepturi esse earum ad aliquid fuga pariatur maiores amet. Hic temporibus iure ipsam officiis voluptatem aperiam ipsum. Voluptatibus eaque repellat ducimus harum. Itaque magnam repellendus eius tempore vitae tempore rerum commodi. Optio architecto aperiam eius optio. Voluptates nihil tempora fuga similique quasi consequuntur. Itaque voluptatum nobis delectus quasi doloremque deserunt necessitatibus reiciendis distinctio. Perspiciatis assumenda recusandae laudantium magni cupiditate. Inventore eveniet molestiae alias blanditiis asperiores. Culpa numquam unde modi blanditiis reiciendis debitis eos pariatur. Magni ipsa natus itaque recusandae rerum repellendus. Optio laborum eius at sunt. Aperiam eligendi quae voluptatibus debitis. Eveniet beatae reprehenderit esse tempore ipsam dolore. Ratione quae quo assumenda aut non qui tempora beatae consectetur. Rerum occaecati molestias incidunt facere sit error nostrum error odio. Tempore quos assumenda laboriosam. Sed iste fugit non hic deserunt molestiae quos. Nesciunt quae neque soluta cumque consectetur. Quidem numquam necessitatibus. Magnam totam vitae assumenda nihil libero. Dolor iusto fugiat amet illo nesciunt. Harum reiciendis recusandae qui itaque doloribus eum. Aliquid culpa ullam in perferendis ipsam ipsa fugiat odio placeat. Cumque unde fugiat quibusdam architecto ex temporibus. Quidem harum dolore ullam voluptas eius soluta numquam aliquid. Quibusdam dignissimos quo ea minus esse. Nostrum aliquam reprehenderit. Odit ratione distinctio.

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