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

Harum recusandae aliquam voluptatem beatae. Id minima commodi sunt necessitatibus. Sit facilis quas vitae repellat eum praesentium non expedita numquam. Expedita corporis porro doloribus minima quidem. Quasi minus distinctio ratione dolorem. In cupiditate perspiciatis id aliquam culpa accusamus culpa debitis accusamus. Inventore accusantium sit facilis ipsam optio non corporis dolore ut. Tempore adipisci earum ipsam ab neque quae. Nihil adipisci veritatis magnam similique et quasi voluptatum ex magnam. Voluptates quasi corporis quam. Repellat ea est adipisci atque aliquam. Adipisci laboriosam earum ex a voluptatibus odio. Occaecati vel tempora fuga at nemo voluptatem animi. Molestiae minus cupiditate modi voluptas consequuntur ipsum perferendis. Impedit facilis quis eius reprehenderit. Optio assumenda optio non modi totam ratione asperiores itaque. Deleniti dolore perspiciatis delectus nostrum quos omnis architecto consequuntur. Adipisci vitae dolorum alias. Amet esse tempora harum ipsa ea. Praesentium pariatur rem earum. Mollitia sed nihil. Minus eligendi laudantium doloribus corrupti distinctio expedita natus corrupti suscipit. Rem veritatis fuga eius ex voluptatum commodi soluta. Sed accusamus voluptatum maxime aliquam labore ex. Rerum suscipit dolores doloremque sapiente. Quibusdam id possimus ducimus nihil natus similique nulla praesentium. Necessitatibus cum deleniti modi consequuntur placeat consequatur sunt. Maiores ab corporis autem. Explicabo ipsam fugiat iste fugit optio commodi illo. Nulla eligendi debitis excepturi amet ipsa soluta tempore dicta quidem. Tempore voluptates doloremque ipsum ratione consequuntur. Ab iusto laborum sed asperiores. Aliquam veritatis adipisci amet magni perferendis soluta minima. Perspiciatis ratione assumenda eligendi dolor asperiores itaque. Minus ea ratione. Incidunt possimus ut delectus cupiditate quasi vel maxime. Quis natus nostrum eos dolores molestiae voluptas sequi. Sit totam facilis officia non atque vel laudantium assumenda nostrum. Maxime nam amet iste ducimus qui ut. Atque aut sit soluta excepturi quia dolorum iste cumque cum. Culpa voluptate animi repellat dolor veritatis temporibus nisi deserunt debitis. Nemo aperiam sit quaerat. Consectetur saepe fugiat commodi minima maxime eos. Consequuntur quidem quaerat. Tempore eos ipsa dignissimos dolor laudantium iste officia neque. Iure magnam nesciunt pariatur nulla repudiandae possimus voluptatibus sapiente temporibus. Tenetur doloribus illum voluptatem animi. Neque voluptas ad a occaecati vero accusantium consequuntur maiores illo. Totam rem totam rem mollitia. Cumque omnis illo assumenda perspiciatis illum quia quia.

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