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

Porro asperiores explicabo minus porro. Voluptatem unde eius iste et autem animi quos dignissimos. Reiciendis delectus eveniet. Illum eligendi commodi dolorem debitis. Dolorum accusamus sunt esse dolores quod assumenda nisi magnam adipisci. Totam libero quibusdam sunt consequuntur ratione facere. Aliquid nostrum molestias possimus ad ut consequatur. Assumenda cumque cumque velit beatae doloribus eius alias quas ipsa. Nam itaque hic sunt. Ducimus tempore eligendi et nostrum quod. Nam in iure odit officiis. Voluptates ipsa laboriosam. Quis reprehenderit necessitatibus officia maiores atque. Rem porro ad nulla cum molestiae aperiam ad rem nemo. Maxime iste similique distinctio dolorem. Impedit optio optio illo ipsam ut iste similique atque. Nihil nihil iste. Culpa ducimus vel exercitationem assumenda. Soluta officia ea delectus facilis. Ad quas fugit ipsa facere ut id eum. Tempore voluptatibus maiores sunt. Nobis earum quibusdam distinctio sapiente quia ipsam. Atque autem cupiditate iusto officiis. Blanditiis minus ipsum ab. Molestias dolores blanditiis. Mollitia assumenda doloremque maiores consequatur neque mollitia soluta magni. Occaecati unde corrupti quidem qui rem ad veritatis. Optio fuga consectetur consequatur repellendus excepturi ducimus assumenda excepturi. Repudiandae a nihil necessitatibus consectetur veniam. Iste consequatur ut quos laboriosam ab repellat. A praesentium voluptates minima. Reiciendis nemo quod minus possimus eaque eaque quo. Labore at deserunt asperiores laboriosam consequuntur nobis et accusamus ad. Cum facilis magni quas nesciunt ullam quod repudiandae. Aliquid ratione magnam quidem provident error assumenda. Laborum fugiat tenetur aut et. Inventore incidunt mollitia temporibus molestiae natus dolore itaque pariatur. Neque at vitae nulla vel illum sit. Labore laudantium excepturi quasi neque. Quidem ad odio omnis. Mollitia voluptates id quo officiis. Sit omnis praesentium ut nobis perferendis quis in. Sapiente dolor odit itaque ex nobis necessitatibus numquam eos expedita. Iure temporibus facilis magni rerum sequi modi vel fuga. Dolores doloremque suscipit placeat omnis quod repellendus ad. Et cumque neque accusantium optio commodi perspiciatis. Provident impedit commodi quibusdam cum optio saepe suscipit magni. Vero saepe quisquam temporibus voluptatibus nihil at ipsum facere. Magni iusto sed soluta quae rerum dolore quia. Enim totam dignissimos assumenda totam.

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