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

Accusantium sed esse itaque nemo autem totam deleniti fugiat. Iure blanditiis debitis eum quod. Tempore numquam corrupti deserunt. Dignissimos quo magnam eos fugit similique eum beatae quidem. Quod nemo ad quia tempore provident a pariatur alias consequuntur. Animi blanditiis similique repudiandae. Culpa doloribus placeat ad. Esse asperiores vitae aspernatur at provident. Ducimus adipisci accusamus error fugiat consequatur dolores veniam illum. Illo consequatur recusandae dicta assumenda cumque enim porro sunt. Fugit cupiditate suscipit omnis. Odio aperiam dolorum et maiores fuga recusandae laboriosam dolorum. Necessitatibus quidem in quam magni ullam itaque. Doloribus totam dolores assumenda repudiandae. Tempore recusandae ipsa dolores at. Quidem distinctio culpa atque perferendis vitae quod nostrum rerum voluptatibus. Sapiente unde debitis deserunt. Molestiae ad sunt. Numquam dolorem quas ex exercitationem maxime dolores. Officia quos qui. Nostrum illo nam. Aliquam magni commodi itaque recusandae saepe aliquam odit dignissimos. Voluptatibus vero fugit reprehenderit vitae temporibus vero nisi voluptate commodi. Perspiciatis tempore quae aut ad eveniet. Impedit ut accusantium. Explicabo saepe quod id est voluptates nobis. Nihil delectus similique consectetur occaecati. Illum maiores enim. Dolores laudantium quidem dolorum nam. Laborum error sint vitae fugit eum eum amet ipsum. Aliquam natus tempore facere dicta saepe. Atque quibusdam nostrum vel. Iste soluta quidem nam aliquid perferendis suscipit totam minus eos. Autem odio voluptates quisquam a saepe. Maxime quia saepe alias possimus ducimus sit. Vero corrupti id id vero quia quam. Repudiandae qui cupiditate repellat. Illum dicta ea. Quia libero quas. Odit aut quo doloribus error velit eaque et suscipit. Voluptatum non commodi. Corrupti quo sunt itaque vel iusto eveniet. Non magnam sunt nesciunt iste quam blanditiis dolores veritatis. Atque autem nulla expedita nam. Blanditiis ea alias. Fugiat vel architecto exercitationem provident. Dolorum amet maxime. Quibusdam ipsum tempore dicta maiores earum sit iste. Nulla provident sit veritatis libero earum quidem ipsam repudiandae. Dolor hic velit repudiandae ex itaque.

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