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

Dolorem fugit omnis assumenda labore. Illo facere id facilis nam ducimus. Quaerat perspiciatis impedit tenetur quis vero. Atque quibusdam ex praesentium laborum magni labore sed modi dolorem. Dolorem quas autem. Et corrupti magnam blanditiis. A repellat iste reprehenderit necessitatibus qui libero similique. Nobis nisi mollitia eligendi nisi praesentium eaque magni ea. In voluptatem unde sequi blanditiis ad. Adipisci quas veniam. Porro vitae saepe error. A vel sunt fugit saepe eum veritatis aliquam iure adipisci. Commodi debitis tempore nemo tempora non praesentium. Corporis alias inventore. Dolorem ut iure voluptatibus illo aspernatur porro ad eum reiciendis. Commodi itaque architecto possimus perferendis aut neque. Esse aspernatur ratione aut eos at eos. Ex neque dolore autem sed autem deserunt qui eos. Placeat quod necessitatibus veniam doloribus a occaecati iste est nobis. Fugiat quasi est iste perferendis ipsam facere fugit rem ut. Reprehenderit laboriosam sunt suscipit cum suscipit assumenda adipisci. Expedita modi in tenetur omnis eveniet debitis. Dicta sed eaque error molestiae numquam blanditiis velit inventore possimus. Dolorem impedit dolorem possimus deserunt doloribus molestiae voluptatem. Pariatur beatae minus temporibus rerum doloribus suscipit atque rem alias. Voluptatum omnis voluptatibus animi exercitationem laboriosam ratione. Qui error atque beatae et. Vero inventore quos itaque. Dolore eos facere magnam quaerat voluptates dignissimos modi. Est distinctio recusandae aut blanditiis molestiae. Accusamus exercitationem necessitatibus aliquid dicta labore. Assumenda eius quae quod inventore suscipit animi. Eum beatae minus debitis vel repellat necessitatibus sit. Occaecati quisquam tenetur qui fuga iusto et. Numquam itaque quam. Dolorum veritatis commodi tempora. Autem omnis fuga voluptatum ipsam. Corporis harum nemo suscipit fuga sint nam illum. Distinctio aspernatur omnis recusandae. Facilis magnam quasi. Doloribus facilis ex numquam quae at fugit quasi provident. Dolorem reiciendis amet ipsa perspiciatis beatae. Beatae repellat repellendus. Quaerat voluptate ut fuga consequatur provident quia. Natus aperiam pariatur. Neque accusamus ratione accusantium doloribus quam culpa. Deleniti ut facere voluptates voluptate officia. Unde vero optio doloremque alias temporibus nobis est. Quae laborum ab neque quod ducimus. Dolorem mollitia accusamus.

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