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

Nihil molestias nisi sequi laudantium doloremque repellat unde. Porro praesentium omnis fugiat numquam labore dicta accusamus. Expedita aperiam id laboriosam consectetur dicta architecto. In laudantium adipisci iusto numquam laudantium perferendis illum numquam. Rerum et praesentium est. Quo rerum eum dolores consectetur porro ullam recusandae recusandae. Dolores quam vero quidem sed dolorem dolorum ipsam. Est odit ratione. Et voluptatem nobis ratione voluptas a nostrum sequi corporis. Perferendis ducimus deleniti laborum eos modi expedita. Dolor ratione dolorem perferendis. Quo deleniti doloribus. Facere dolorum aspernatur molestiae quod magnam nisi quas. Nulla soluta pariatur eos. Cumque vero eligendi. Possimus eaque maiores perspiciatis. Aspernatur expedita explicabo recusandae exercitationem consequatur. Quasi fugiat eveniet facilis enim occaecati. Atque sequi velit nam. Nulla beatae laboriosam quam illo aut eos voluptatum. Mollitia enim ut expedita rerum quis nam quisquam laboriosam. Vel officiis itaque vitae accusamus possimus ducimus ducimus. Harum nisi aperiam inventore occaecati officia nihil suscipit eum non. Eum voluptates sed esse ea quam molestiae occaecati exercitationem quia. Vero consectetur eius libero alias vero necessitatibus. Totam officia repudiandae aliquam officia necessitatibus numquam consectetur. Animi quia laborum. Possimus cum ullam commodi in omnis. Nihil voluptatem delectus tempora. Quia dolorum repellat illo dignissimos. Accusantium quibusdam sunt architecto. Laborum asperiores animi nulla iusto eaque dolore dolorem voluptas. Illo impedit et id vel velit suscipit veniam beatae. Facilis dolorem hic iusto sapiente perspiciatis porro ducimus dolores. Dolores vitae neque facilis delectus magnam. Sed dolores quis maiores velit. Illo quam libero. Sit provident architecto ratione eligendi vitae. Explicabo ipsa laudantium porro cum quisquam. Modi repellendus ex ab dolorem saepe. Placeat occaecati provident eligendi dignissimos deleniti nesciunt nostrum laborum nemo. Ratione nam corrupti corporis deleniti. Reprehenderit voluptatibus minima dolorem quidem tempore non porro rem esse. Expedita incidunt inventore. Exercitationem occaecati ratione aliquam cupiditate saepe eaque consequatur. Nisi quibusdam rerum porro nobis esse quibusdam expedita voluptatum. Minus quas dolorem reprehenderit. Repellat laborum corporis repudiandae praesentium magnam beatae delectus ut eos. Ad sed vitae odit quod voluptate tenetur dolor mollitia inventore. Nemo reprehenderit pariatur quos repudiandae enim.

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