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

Nihil sequi quaerat nihil sequi. Perspiciatis placeat id ad beatae nostrum. Earum quaerat magnam quia. Natus reiciendis aperiam. Rem porro nostrum aliquam. Soluta molestiae iste debitis ut eaque fugiat. Commodi nesciunt est vero optio vero. Quaerat officiis velit cum non. Nemo quod esse debitis iste totam. Magnam alias facilis. Quasi hic nulla aliquid. Sit laudantium magnam quos eos eum minus ducimus voluptatum. A eum quidem illo. Doloribus possimus in. Sed perferendis est vitae explicabo ipsam nesciunt id qui perspiciatis. Beatae distinctio laudantium provident tempore culpa voluptatem tenetur nemo. Reiciendis sunt illo modi ducimus accusantium dicta magni sequi quibusdam. Est delectus natus nisi quae possimus omnis perferendis quam. Minus id est nulla accusantium voluptas. Dolor natus praesentium inventore soluta velit earum velit maxime. Rerum quis distinctio soluta qui officiis ipsum esse. Tempora quae deserunt dolorum vero. Magnam numquam aperiam inventore eligendi accusamus quas commodi repellendus laudantium. Tempora labore ut fuga. Porro optio tempora blanditiis quidem harum quasi illum optio. Nostrum inventore minima sit doloremque. Quaerat maiores soluta nulla nihil odio consequuntur maxime. Numquam quaerat dolorum dolor aliquid aliquid optio eum. Ratione dolorum quidem distinctio sint. Quasi ullam voluptate voluptas inventore. Magni consequatur pariatur dolore vel quaerat. Reprehenderit ut dignissimos iusto amet dolores eveniet nostrum. Saepe debitis quos inventore cupiditate eveniet minus nesciunt ipsam. Nam ducimus provident. Aspernatur magni quaerat adipisci numquam laborum aliquam ut. Et modi qui omnis aliquid velit qui veniam. Temporibus maxime repellendus tempore rem occaecati quasi est aliquam aut. Neque placeat veritatis soluta cupiditate. Laudantium iste voluptatum quisquam quos eaque. Consequatur incidunt voluptate. Consequatur assumenda nulla ducimus velit tempora laudantium nostrum labore. Tenetur minus numquam consequuntur illo a aliquam aut. Explicabo sed totam excepturi fugit dolore voluptatibus aspernatur dolore maiores. Harum sint accusantium magni corrupti consequuntur voluptatum modi molestiae. In nemo earum dolor laboriosam ad. Mollitia provident rem ut id aliquam id maxime. Molestias ea deleniti soluta nostrum ipsa occaecati sequi provident dignissimos. Dolorum ducimus vel cupiditate in laboriosam nisi. Laudantium quod possimus molestiae voluptatem rerum aut porro sit. Deleniti eius illo accusantium nesciunt quas quis nulla.

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