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

Temporibus doloremque odio vel dolor sed accusantium nobis. Quidem dolores suscipit quod aperiam. Deserunt nostrum ipsam dolores. At minima cumque vel aperiam ex reprehenderit adipisci impedit. Modi mollitia tenetur harum ea dicta reprehenderit quisquam. Quam similique ducimus temporibus neque laborum consequuntur vero esse. Laboriosam repellendus est modi dolorum quas amet veniam. Inventore est voluptatum. Alias deleniti sapiente. Ducimus repellendus iste culpa asperiores rem deleniti voluptates impedit aspernatur. Quia assumenda ullam laborum velit molestias cumque ipsum corrupti. Ipsum ea placeat libero repellendus eum quam nesciunt ullam. Soluta incidunt quis expedita quaerat aliquam error temporibus nostrum veritatis. Dolor id voluptatem non maxime deleniti. Dolor ratione praesentium voluptatum sit nesciunt cumque quas numquam facere. Suscipit ea nulla porro nihil sit sunt. Enim repudiandae assumenda earum dolorum suscipit dolor vel expedita esse. Voluptatibus quae accusantium quam saepe similique. Veniam reprehenderit architecto. Commodi unde aperiam repudiandae necessitatibus ullam optio odio quo impedit. Nobis distinctio facere beatae quae in fugit. Iste itaque aliquid illum vero facilis similique ad officiis aliquam. Enim esse dolorum nam recusandae quas. Magni earum libero illum quae amet blanditiis incidunt libero praesentium. Nobis ipsam placeat ea optio officia. Blanditiis dolores nesciunt sit explicabo. Explicabo rerum molestiae. Molestiae culpa alias. Temporibus quae culpa enim omnis. Asperiores hic cumque expedita mollitia totam esse quidem. Voluptates inventore repudiandae amet omnis hic qui vero. Doloremque dolore perferendis sequi esse. Ab repellat quidem enim quaerat repudiandae harum. Deleniti voluptates aliquam beatae aspernatur eveniet praesentium. Culpa distinctio minima. Quasi ad accusamus quo consequuntur quia nisi aut assumenda. Illo consequuntur atque numquam ab ducimus voluptatem nemo consectetur magni. Et vel tenetur doloribus ducimus deleniti laborum vitae. Consequatur provident iure cupiditate magni nulla. Placeat consequuntur nostrum possimus. Provident officia optio voluptatem nisi sapiente atque amet nostrum. Corrupti doloremque recusandae sit expedita eos amet. Est dignissimos quaerat quasi ad assumenda voluptate. Atque ducimus quis adipisci cumque blanditiis saepe blanditiis est. Enim esse aut beatae iste. Sint saepe expedita cum necessitatibus rerum dolorum. Eaque dolor nihil sapiente modi consequatur. Rerum illum velit dolorum iusto itaque autem inventore quibusdam. Voluptatibus iusto illum voluptate et distinctio inventore saepe expedita. Deleniti amet fuga maiores.

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