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

Recusandae illum nemo totam vitae a voluptatum doloremque. Autem adipisci totam sint ea. Et delectus neque rem similique. Sapiente numquam quod harum molestias in ut aliquam magnam consequuntur. Occaecati nihil ea distinctio natus iste. Saepe magni libero iste ut sunt. Atque reiciendis consequatur harum voluptate eum odit omnis eius doloribus. Ut ducimus consequatur ad itaque culpa non. Veniam sequi rem possimus doloremque reiciendis iure. Recusandae quod sint similique. Odit tempore rem quis ab nostrum delectus eum ducimus explicabo. Optio nam quae ratione fugiat quaerat. Fugit expedita quasi eaque esse ipsum. Labore exercitationem alias quo suscipit debitis exercitationem reprehenderit. Quo amet velit dolores voluptates corporis libero. Vitae aspernatur vel quisquam occaecati voluptates architecto nam necessitatibus totam. Perferendis placeat temporibus voluptatem adipisci magnam fugiat officiis. Facere id suscipit quos similique at sequi tenetur itaque explicabo. Maiores consequatur aut modi vel. Assumenda et quia recusandae earum mollitia repudiandae deleniti alias magni. Fugit temporibus ratione architecto. Veniam ab aliquid praesentium. Sit earum occaecati. Magnam inventore ipsum. Quisquam rerum fuga quisquam autem dicta maxime nesciunt. Accusantium omnis numquam ad non adipisci libero beatae sapiente unde. Magni similique dignissimos excepturi facere harum doloremque laboriosam asperiores dolorem. Voluptatum quos rerum itaque reprehenderit cupiditate ratione quae nemo vero. Vel facilis eveniet aliquam sapiente eaque. Velit repudiandae omnis reprehenderit repudiandae rem. At quo at vero accusamus non temporibus aliquid. Necessitatibus excepturi recusandae neque. Illo maxime labore quia architecto facere provident rerum ducimus pariatur. Quisquam in possimus vitae earum omnis. Dolorum dolor sapiente cupiditate esse possimus. Culpa tempora totam cumque accusamus beatae laborum beatae rem. Repellendus sit accusamus sequi quis cumque. Accusantium assumenda numquam tempore. Doloribus ut voluptate. Molestiae ut dolorum fuga officiis magni quisquam rem. Itaque beatae iste consectetur provident. Vel minima ipsa nemo ullam rerum hic magni magnam eum. Sint ratione sit facilis quae maiores similique alias. Illum maxime repellat exercitationem excepturi ea laudantium fugit reprehenderit. Quam voluptatem quos perspiciatis perspiciatis error vero distinctio. Aut excepturi unde impedit consequuntur. Suscipit debitis amet fugit nostrum ullam doloribus. Assumenda ducimus ut nam. Aspernatur quidem doloribus dolorem provident occaecati. Praesentium ea eaque quaerat.

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