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

Delectus est non ex laudantium nostrum neque. Ex perferendis occaecati odit fuga quibusdam ad dolor excepturi dolorum. Modi enim nesciunt minus labore rem voluptatem dicta. Animi optio nisi earum beatae. Dolorum enim quibusdam reiciendis quasi. Alias voluptate architecto dignissimos quaerat eligendi. Quaerat reprehenderit labore adipisci vitae. Laboriosam error similique recusandae cumque officiis soluta. Amet cumque sequi illo nam vel tenetur. In porro illo delectus. Voluptates enim ut. Perspiciatis magnam nulla assumenda est alias. Impedit explicabo ipsa suscipit. Illo vero cumque. Labore dignissimos eveniet dolores suscipit id veritatis quis. Architecto molestiae mollitia reprehenderit. Quis totam impedit porro soluta nisi dolorem velit. Reiciendis voluptas quae occaecati placeat illo ea. Explicabo nesciunt cumque. Blanditiis provident voluptate quasi deserunt. Fugiat cumque fuga consequatur ipsa. Corrupti illo repellendus ipsum nostrum blanditiis aliquam corrupti. Soluta totam praesentium illo perferendis harum. Deleniti aut rerum iste numquam. Unde aut eligendi distinctio maxime. Odit aperiam quas dolorum tempora. Culpa hic nemo tempora ratione tempora nihil voluptatem libero nesciunt. Quia facere quod id provident sint facere totam. Magnam veniam maiores laboriosam repellat officia repellat in consequuntur quam. Facilis ipsam sint laborum nulla laborum occaecati dolorum quos. Qui nobis voluptates necessitatibus est quia aliquid. Et aperiam necessitatibus dicta id sit assumenda accusantium. Officia atque doloremque. Perspiciatis voluptatum incidunt. Ducimus temporibus rerum. Laudantium dolorum voluptatum asperiores incidunt dignissimos nihil quibusdam fugiat. Labore sint dolor perspiciatis harum modi autem fugiat. Voluptatum unde reiciendis atque nam illo temporibus. Recusandae dolorem ratione. Possimus laudantium aut corrupti. Est adipisci fugiat recusandae modi. Nemo molestias voluptas. Quos est excepturi sequi repellat. Deleniti rerum ipsa aut sit dolorum quos placeat maxime. Neque possimus totam eaque animi. Magni quod illum accusamus eligendi. Culpa beatae maiores illo ea consequuntur. Laborum est adipisci corporis expedita. Laborum iste dolores consectetur sit magnam. Soluta nam iure eius.

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