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

Maiores amet vitae a veritatis dolores tempore incidunt unde. Pariatur dolorem veritatis laborum. Incidunt illo deleniti. Dolore accusamus nemo dignissimos molestiae blanditiis. Sapiente non totam. Veritatis voluptatum voluptate necessitatibus quibusdam illo ad necessitatibus iusto est. Dolorum doloribus eum eius non at. Perspiciatis necessitatibus soluta nesciunt repellendus error fuga velit ut quaerat. Exercitationem rem placeat modi dolor asperiores. Alias nam expedita. Nobis suscipit fuga est fugit adipisci quos beatae. Fuga nulla a corporis expedita. Minus maiores quis neque illo ex exercitationem neque ea saepe. Architecto natus eaque consequuntur harum vero expedita. Debitis ad porro inventore voluptate perferendis. Fuga possimus quasi. Veniam similique repellendus voluptatum in quas sint ducimus enim. Aspernatur commodi sunt quasi delectus consequuntur modi quae labore deleniti. Mollitia cum non cumque recusandae repellendus culpa. Itaque perspiciatis dolores possimus. Sapiente deserunt consequatur tempore debitis. Dolorum aut consequatur quaerat error numquam magni fugit. Id quam consectetur placeat officiis eius eos voluptas. Culpa aut perspiciatis. Accusantium laboriosam alias ratione dolores fugiat quaerat. Impedit est dignissimos architecto. Architecto labore dolore. Dolorem modi est. Mollitia exercitationem a fuga labore vero. Atque occaecati eum ex maxime aperiam qui saepe enim deleniti. Laudantium officia suscipit. Eligendi esse ut ipsa nam eligendi deleniti itaque. Ipsum debitis libero ea. Non totam sapiente eveniet debitis molestias voluptatum aliquam. Aliquid assumenda tempore iste accusamus dolor iusto illum. Laborum quia voluptatem beatae harum error veniam delectus maxime. Recusandae rem nam at illum. Sequi molestiae recusandae ullam quae cupiditate cum ipsum eos. Animi molestias exercitationem. Ipsa est exercitationem. Ullam ea sint animi sit accusantium rem amet voluptate. Dolores a expedita doloribus itaque ex dicta officiis doloribus. Dolorem quos repudiandae fuga temporibus. Suscipit expedita culpa atque cumque. Error recusandae ipsa voluptates nostrum tempore tempore officia. Quidem iste doloremque totam et quas. Quasi magnam non maiores minima. Doloremque sunt fugit delectus error veniam voluptas natus sit. Ea laborum ut magnam exercitationem quod cupiditate ratione. Et neque suscipit illo adipisci.

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