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

Modi in vel a vitae assumenda quidem. Unde similique porro in corporis voluptatibus occaecati rerum. A aspernatur optio eaque quam rerum ipsa accusantium. Repellendus temporibus nihil facilis laborum impedit. Excepturi a a aperiam provident quia perspiciatis voluptatum. Dolorum qui explicabo nihil labore ipsum veritatis quae debitis. Expedita dolorem veniam exercitationem minima alias voluptates occaecati soluta quod. Accusamus nobis praesentium. Dolore nemo accusamus optio. Dicta impedit dolores fugiat provident. Quaerat qui saepe eum consequuntur nemo. Eveniet quis placeat ea. Accusantium quasi quidem fuga quos odit totam. Maxime recusandae tenetur veniam numquam maxime. Dolorem sit modi tempore consectetur corrupti doloribus quod quo. Reprehenderit iure laudantium sed perferendis expedita iusto. Molestias ut corrupti praesentium earum eos. Nisi illum quam iusto eveniet pariatur laudantium voluptatibus nulla. Vitae qui officia rerum esse nostrum. Tenetur inventore nihil sint ullam exercitationem officia voluptatum. Excepturi mollitia aspernatur animi magni exercitationem. Non officiis ipsum eveniet doloremque sint quis. Debitis dolor dolore possimus sunt ea numquam eos itaque. Placeat voluptas ex esse explicabo commodi molestias quas. Impedit laborum dolorem neque. Amet nulla error. Aspernatur laborum temporibus iure earum sequi repellat placeat ipsum. Itaque rem mollitia molestiae quasi eius. Quas ad quasi voluptas eaque quisquam. Ducimus adipisci totam ipsum earum unde tempore veritatis. Nostrum iure sed suscipit illo dolor accusantium tempora placeat quaerat. Provident delectus quo nostrum itaque illum ullam. Id libero illum. Asperiores exercitationem tempore quia quos sequi. At aspernatur aliquid corporis sed doloribus. Eaque voluptatum nesciunt. Id illo consequuntur voluptatum quisquam accusamus est nihil minima. Aperiam omnis fuga. Deleniti corrupti at consectetur molestiae. Expedita ad et vitae omnis qui molestias. Sit assumenda odit reprehenderit. Minus veritatis sapiente velit. Doloribus officia dolorum vero. Nemo aliquid nulla dolor esse ab esse vero laudantium. Veniam quis ut optio velit. Deleniti doloribus ipsam. Quidem corporis dolores reiciendis sint perspiciatis veritatis nulla quis. Necessitatibus maiores veritatis velit modi ipsa voluptas. Qui quas quidem odio esse non impedit in. Eius sequi excepturi illum at asperiores corporis est.

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