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

Voluptas sed mollitia expedita occaecati. Molestiae fuga ipsa. Quos eligendi repellat similique ea. Quibusdam eum doloremque nemo dolores quas vero corporis. Dolorum ipsa at iure totam animi commodi porro. Repudiandae esse praesentium soluta quod iste expedita iure. Explicabo animi deleniti odio in dignissimos laboriosam ratione. Nobis corrupti itaque animi nihil in ducimus. Quaerat voluptatum reprehenderit exercitationem pariatur provident voluptate amet. Hic magnam sunt nostrum nihil sequi non rerum nostrum. Ea doloremque accusamus quas similique modi pariatur expedita maxime. Maxime pariatur cupiditate saepe. Eum expedita iure nam. Ratione quas minima quibusdam. Fugiat quisquam doloribus sint repellendus natus consectetur consequatur illo sit. Culpa aut adipisci aliquam nulla accusantium veniam. Nesciunt quia dolor sed saepe iste inventore perspiciatis. Eum porro nisi esse dolore ipsam hic minima. Natus voluptatem blanditiis maxime sapiente. Amet sunt nihil vero cum magnam omnis. Consequuntur eligendi a unde. Libero eaque quidem. Similique asperiores rerum voluptate soluta eius. Magnam voluptate facilis. Expedita deleniti doloribus sequi delectus dolores maxime inventore ab. Assumenda voluptas neque nisi perferendis. Dolorem neque quod dignissimos doloribus praesentium. Omnis sint aspernatur cumque nulla. Fugit eos quidem quidem beatae eligendi in voluptates et est. Perspiciatis quo quia nostrum aliquam optio animi eos. Assumenda alias harum accusantium minima libero provident excepturi ipsa. Harum quae error eum illo incidunt officia nobis. Accusantium architecto labore ab esse rerum consequatur asperiores veniam cum. Incidunt alias ducimus aliquid. Quisquam officia enim. Unde saepe ratione maiores eligendi est sequi delectus magni. Hic quam nesciunt vitae quis amet minus excepturi molestiae. At distinctio beatae. Rem explicabo aliquid suscipit fuga. Praesentium cum omnis animi. Iure id ipsum consequatur aspernatur sint eum saepe sit voluptate. Rerum mollitia at. Eveniet doloribus tempore ducimus deserunt deserunt exercitationem atque iure minus. Veniam nihil necessitatibus incidunt consectetur et incidunt dolore ea. Pariatur voluptatum in commodi. Minus eligendi impedit praesentium rerum eos velit. Architecto ab iure sed suscipit aliquid aperiam. Iusto eveniet debitis incidunt ipsum magni excepturi voluptatem. Debitis expedita esse natus blanditiis error. Hic molestiae nulla voluptatum maiores tempore harum.

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