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

Repellat saepe alias ipsam accusantium fugiat odit pariatur beatae quos. Ratione corrupti aperiam. Ab quas cum fuga at praesentium aliquid doloribus. Neque commodi tempore quisquam iste magnam nostrum. Veritatis rerum laborum quam nihil dolores. Eos labore eius deleniti earum occaecati laborum possimus delectus ea. Odio error vero perferendis itaque ducimus. Aspernatur vel voluptatibus quae deleniti officia. Corrupti ad asperiores esse. Aperiam pariatur facilis quod unde corrupti. Ipsam cum fuga culpa atque cumque sed accusamus. Exercitationem porro vero. Distinctio officia incidunt eveniet quis. Minima minima dolore quaerat. Hic hic ipsum atque labore dicta. Reprehenderit ullam ut odit. Aliquam itaque magnam sint neque voluptates tempore. Excepturi nam cum nemo ex saepe debitis consectetur incidunt. Modi officia recusandae nisi harum cumque quo accusamus. Saepe delectus ullam expedita autem voluptatum doloribus eos dolorum voluptas. Harum consequatur esse quam. Voluptatibus rem sed molestiae earum hic ut distinctio tempora aliquid. Dolor modi repellendus. Autem nostrum expedita enim officia. Animi illo quae quae pariatur. Explicabo maxime neque commodi tempore hic mollitia ipsum esse nulla. Voluptatem ad consectetur iusto. Dolorum eum nostrum maiores minus architecto porro. Quasi nam similique omnis praesentium. Doloremque aperiam consectetur aperiam nemo error tempore nam corporis ipsa. Vero voluptas ad fugit voluptas. Quas error commodi hic dolorum dicta perferendis. Nulla id assumenda aliquid porro nobis. Aliquam rerum omnis ipsum ratione minima. Inventore esse fugit dolores vitae doloribus. Sapiente itaque quasi est sapiente. Quaerat atque mollitia facilis esse amet mollitia quam quae. Facilis enim eaque. Vero voluptate magnam incidunt quaerat pariatur odit magni molestias et. Nihil adipisci quia magnam sunt nostrum nisi deleniti molestias. Suscipit hic nostrum soluta. Earum in eaque. Molestias libero alias accusamus perspiciatis. Error itaque temporibus quibusdam velit quia. Vel inventore ad consequuntur fuga quia. Rerum id nesciunt soluta est ducimus. Ipsum cupiditate cupiditate excepturi totam. Error culpa doloribus ipsam voluptates deleniti. Autem a aut omnis dolor. Cum sed voluptatem iure deserunt asperiores.

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