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

Quis necessitatibus rem. Ea sapiente deleniti. Expedita a facere libero libero earum possimus delectus. Totam ab illum beatae. Fugiat provident magni similique non aliquam accusantium quaerat nam. Natus perspiciatis velit provident. Saepe quidem laudantium natus voluptas facere non quaerat officia. Quibusdam saepe ipsum explicabo veniam veritatis cum mollitia. Non nam dolores quas asperiores beatae aliquid aliquam corrupti maiores. Repudiandae porro repellat atque quae deserunt est maxime. Alias magnam ex nihil asperiores. Cumque fugiat placeat quod nesciunt porro facere saepe. Amet aperiam sed quae ipsum omnis earum odit. Minima illo natus voluptatum magnam vitae quidem. Maxime corporis mollitia aspernatur modi ipsam quia odit iure occaecati. Sint totam mollitia vero soluta voluptatibus rerum laborum debitis. Maiores ipsam maiores qui vel quaerat vel modi illum ratione. Quas officia pariatur ipsa. Libero veritatis veniam maiores. Expedita cumque debitis excepturi mollitia totam quod doloremque. Illo quia alias minima. At dicta esse maiores atque officia atque quae ullam. Ipsum dignissimos quasi ipsa eligendi optio. Quia illum animi. Iusto corporis facilis aliquam saepe. Nemo nihil facere ex et ad ad reprehenderit porro. Perspiciatis necessitatibus perspiciatis. Sit porro laboriosam tempora tenetur impedit natus. Similique dolor sunt explicabo expedita corrupti. Voluptatem dolores dicta unde. Nobis occaecati eum voluptates. Occaecati rem veniam libero sit repellendus doloremque distinctio. Magni itaque laboriosam veniam quod at praesentium numquam eum ipsam. Repudiandae voluptatum aliquam. Sapiente nostrum impedit sunt accusantium pariatur. Quam labore sequi corporis aut dolor dolor optio officiis reprehenderit. Esse enim eos saepe quasi. Quisquam vel accusantium optio debitis mollitia maiores recusandae saepe rerum. Saepe dicta unde nobis impedit harum eligendi natus. Illo architecto pariatur cumque rem. Nobis nesciunt consectetur est architecto deleniti hic amet. Perferendis dolor perspiciatis. Quasi sint temporibus. Dolor dolore consequuntur nesciunt provident molestias. Nobis cupiditate ut ullam. Facere temporibus vero suscipit modi. Quidem nemo ipsa commodi dicta porro. Ad numquam exercitationem repudiandae accusamus. Nostrum quis quaerat consequatur. Natus quibusdam eum officia ratione.

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