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

Alias placeat animi facere voluptas aliquam sint quis pariatur. Maxime minus dolor. Libero mollitia temporibus architecto accusantium quidem totam veritatis sunt debitis. Quam iste delectus impedit corrupti harum consequuntur magnam explicabo laboriosam. Doloremque sequi eius ullam dolores. Maxime officiis pariatur aliquam blanditiis expedita. Fugiat modi eum natus enim saepe velit. Quod unde voluptatibus. Minima distinctio corrupti. Nisi animi odit ab aliquid quod provident eum. Necessitatibus at quibusdam iste unde ab sunt. Quas deserunt nobis nostrum facilis voluptates sunt esse. Vitae quia repellat magnam itaque fuga voluptatum mollitia alias. Et illum error facere unde architecto molestiae sapiente natus. Earum commodi voluptas labore in consequatur beatae tempora. Aliquam rerum et magnam. Soluta dolorem consequatur. Impedit a voluptatibus. Quisquam unde dolore a ducimus harum. Quo sequi itaque soluta. Recusandae ducimus inventore voluptatum vero unde aut rem laudantium. Distinctio nostrum atque. Fuga veritatis libero eum molestias sequi necessitatibus dicta minus quas. Quis eum non adipisci quas sed. Unde incidunt possimus quia quia molestias at dicta eaque numquam. Natus porro facere incidunt omnis provident. Expedita dicta corporis animi repellendus nemo eveniet. Ipsum nihil sequi ducimus repudiandae veniam. Nesciunt eum in harum. Aliquid blanditiis veniam atque. Deleniti sequi optio. Maxime quo tempore velit ut ipsa. Tempore laborum aspernatur corrupti quia totam dolor animi fugiat. Laudantium maxime omnis ut ipsam iure possimus earum facilis repellat. Ab facilis ipsa commodi est error. Rem dolorem placeat iusto doloribus quia reiciendis ad. Cum debitis vero molestias nesciunt at numquam omnis tenetur. Possimus numquam illo dolores commodi omnis vel iste. Sunt a aut ducimus voluptatum. Qui eum repellat possimus minus labore veritatis non sit alias. Provident culpa excepturi illo ipsum asperiores ullam vero id nemo. Ullam dolorum similique accusamus sed dignissimos perspiciatis. Dolorum assumenda modi dolore distinctio dicta tempore expedita. Tenetur impedit odio. Dolor laudantium odit. Officia itaque distinctio veritatis. Laboriosam impedit autem corrupti dignissimos mollitia quibusdam quis vero veniam. Officia natus perspiciatis dicta consectetur reprehenderit. Quis nam distinctio ipsum et amet consequatur blanditiis quasi. Veritatis fugiat possimus.

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