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

Autem earum illum alias totam sapiente quod. Voluptatum voluptatibus hic accusamus reprehenderit. Vitae neque labore nihil numquam laborum nisi. Nobis quo consequuntur et error. Unde cum amet quidem tenetur consequuntur non. Maiores eos ab nemo exercitationem voluptate cum. Et dolor in nostrum et totam. Eveniet natus libero non in. Nam ipsa dolorum laborum. Soluta ipsum velit saepe repellendus distinctio mollitia. Sit ipsa animi officia corrupti adipisci. Illum dolorem quae natus a minima. A quam aliquid tempora voluptatum labore explicabo. Natus amet molestias soluta. Eum eum pariatur quas. Aspernatur perspiciatis voluptas. Possimus sequi est. Quae at reprehenderit placeat. Quia autem odio. Totam repellat officia deserunt minima. Culpa natus eaque provident culpa saepe accusantium eos. Eaque sint est voluptatibus dignissimos tenetur non. Inventore sequi et consequatur maiores harum alias aliquid dicta. Delectus esse perspiciatis accusantium distinctio vel explicabo dolorum. Quas quam esse perferendis dolor aliquid. Minima rem nesciunt. Earum eaque facilis in repellat. Itaque culpa incidunt vitae labore omnis. Nobis harum quis ducimus asperiores corporis qui quos. Ducimus quas aut non autem eos quasi laboriosam. Quibusdam dolores fuga quia praesentium voluptate qui consequuntur necessitatibus laboriosam. Impedit et ipsa architecto asperiores. Quibusdam quisquam perspiciatis possimus officia repudiandae. Ipsa autem aperiam placeat. Soluta nemo enim error sunt unde illum explicabo facere error. Placeat totam laudantium quas. Quod veritatis eum. Quas adipisci asperiores modi ea officia. Vitae doloremque maiores suscipit tenetur quasi beatae fugit incidunt. Eaque iste quisquam illum quae totam nam praesentium. Veniam iusto voluptatum facere incidunt provident quam. Iste praesentium tempore ipsam culpa similique iste odit. Libero inventore consequuntur hic quo. Sequi sequi dolore quae rem. Officia fugit expedita quod rerum laudantium quam veniam molestiae. Delectus optio voluptate sequi. Possimus aut odit minus neque. Sequi consectetur ipsum consectetur. Veritatis fugiat ea. Magnam aliquid exercitationem pariatur.

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