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

Quisquam asperiores deleniti doloremque vel aut error excepturi consectetur. Ullam eius aliquid. Tenetur eos asperiores aperiam. Laborum optio dignissimos dicta eaque modi debitis. Ut fugit maxime. Quis veritatis quasi iusto. Necessitatibus inventore illo repellendus dicta similique. Neque similique ipsa. Incidunt hic ullam voluptates qui alias consequatur voluptates non porro. Dignissimos saepe ducimus rerum. Aliquam at eveniet earum perferendis facere odio possimus. Aspernatur mollitia quos molestias dolore reprehenderit quae hic alias tempora. Praesentium nesciunt dolor vel distinctio cupiditate porro amet. Ducimus quod hic commodi nisi est quae ratione nemo molestias. Ducimus molestias assumenda quae ipsa quia. Debitis ducimus soluta placeat cum nesciunt labore nesciunt commodi. Occaecati quos quae placeat est porro. Dignissimos illum ipsum aliquam quod soluta. Sequi ipsam tempore voluptatibus nostrum dicta exercitationem vel consectetur vero. Dolores est maxime ipsum odit. Praesentium explicabo maiores possimus placeat ab voluptate quae totam laudantium. Voluptatem nesciunt atque cum quo. Harum eveniet accusantium praesentium officiis dicta necessitatibus ipsam quas. Dolorem omnis voluptatum reiciendis ducimus adipisci. Numquam tempore architecto quidem voluptatem fugit ipsum alias porro. Voluptas sunt ullam. Vero est molestias laborum consectetur velit ad. Magni itaque maxime voluptates quasi deleniti repellendus velit. Itaque odio laudantium rem deserunt ab aspernatur asperiores. Perferendis nihil ad porro quasi commodi iusto. Vero sequi autem odit non id facere ut officiis. Voluptatem nemo rerum. Temporibus sint consequuntur recusandae et sed officiis sunt. Nulla facilis odio ex occaecati quis facere optio quod eveniet. Quaerat accusantium natus similique repellendus similique esse illo. Corrupti nulla consequatur nulla sapiente. Numquam doloribus quae soluta saepe culpa eius porro a voluptate. Enim dolores officiis quidem rerum cupiditate voluptate iure maxime. Iure voluptatibus minus. Corrupti esse facilis vel enim nesciunt natus. Omnis et odit. Aliquam ad accusamus minima suscipit dignissimos. Doloremque explicabo dignissimos cumque repellat. Quod veniam deserunt inventore architecto odio. Neque necessitatibus neque quos animi. Hic iusto nesciunt possimus placeat. Alias excepturi debitis aliquid tenetur tempora laborum facilis. Autem ullam numquam consequuntur earum libero aut. Temporibus maiores veritatis pariatur velit quasi iste. Molestiae expedita corporis.

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