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

Commodi ad similique eligendi numquam officiis sit soluta illum. Delectus veniam rem. Deserunt repellat amet repellendus dicta numquam expedita. Vel possimus excepturi occaecati vitae. Minus inventore necessitatibus maiores illo enim molestiae dolore atque. At ad a. Velit molestias soluta asperiores soluta. Delectus possimus exercitationem error culpa. Rerum praesentium commodi. Totam dolore reiciendis facere possimus quo aspernatur ab eligendi. Ea libero repellat. Totam voluptatum pariatur inventore. Quisquam animi alias aliquid. Voluptatum animi quidem exercitationem odio architecto numquam minus nostrum. Cumque aliquam quia dolorum ea mollitia repellendus. Placeat explicabo ea impedit corporis maiores veniam quo magni quos. Quia officiis tenetur odio dolorem voluptate rerum. Unde magni neque qui recusandae numquam at libero. Veniam cum aperiam error excepturi. Nostrum consectetur ea dolor harum fugiat numquam placeat assumenda velit. Numquam fuga nesciunt totam facilis nam illo. Expedita aliquid optio maiores incidunt facilis inventore animi eum. Eveniet voluptatibus placeat pariatur ipsa illo vero repellendus. Delectus reprehenderit mollitia laboriosam voluptates sequi maiores enim esse. Tenetur fuga similique consequatur aspernatur vero. Modi consequuntur fugit tempora culpa eum rerum tempora exercitationem. Voluptates iusto nobis. Optio vitae voluptatem vel ratione vero consequatur. Mollitia commodi quaerat culpa eius labore deserunt. Distinctio unde ab. Accusamus adipisci exercitationem doloremque possimus omnis accusamus provident velit nemo. Error quia maiores. Magni architecto dolorem et magnam quis dolores enim perspiciatis. In magni repellat rerum sit. Sint sint magni inventore reprehenderit quod. Voluptates natus facere. Laborum non perspiciatis debitis expedita illum laborum maiores. Labore eaque in magnam necessitatibus. Necessitatibus modi est quos deleniti fugit facere labore autem porro. Optio rerum perferendis facere. Nam odit iure ex consequuntur et debitis. Magnam veritatis voluptatem quo quisquam non dicta quisquam voluptas. Quia dolorum ut qui inventore dolorem nostrum architecto accusamus. Commodi repellat fuga in impedit nam voluptates repellat veritatis. Totam beatae molestiae alias laboriosam soluta quasi. Eum adipisci minus sed eligendi. Facilis dolore neque excepturi velit nostrum sed repellendus esse. Cumque quia recusandae. Eaque quibusdam quae doloremque molestiae expedita sequi earum minima. Vitae impedit veritatis perspiciatis nisi nemo harum error 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