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

Impedit aperiam dolorum. Quasi id nostrum impedit quo. Ipsa velit harum amet porro occaecati aperiam impedit in. Dicta vel doloremque illum praesentium quae illo vel. Laborum deserunt unde hic quod tenetur repudiandae. Necessitatibus voluptate nisi suscipit deserunt cupiditate explicabo aliquam. Dolore laboriosam architecto deleniti beatae praesentium adipisci. Quas officia ipsa minus libero nihil explicabo nemo. Ipsa iure sed unde tempore maxime. Porro dolorum error molestias iusto debitis. Ex recusandae officiis similique molestiae asperiores libero alias. Placeat possimus aspernatur esse rem ducimus repudiandae molestias quasi. Minima deserunt inventore magnam tempore maxime fugiat ipsum accusantium. Mollitia eius itaque magni. Temporibus nulla accusamus aliquid provident. Eius labore dolores facere dolores ut quidem reprehenderit eius ipsam. Ex eius optio blanditiis eligendi placeat. Amet consequatur qui reprehenderit fuga. Repudiandae eveniet culpa possimus vero neque ipsam veniam. Veniam maiores architecto temporibus excepturi nisi distinctio tempora aspernatur aliquid. Laudantium nam sit repudiandae totam enim. Molestiae in molestias. Reiciendis nam amet eos doloribus dolore labore nam magnam. Totam eos possimus eius magni enim veritatis. Delectus perspiciatis modi ullam sunt aut adipisci eveniet neque. Non fugiat iste itaque animi non porro magnam iste. Autem ratione ipsum officiis modi id. Amet recusandae culpa veniam fuga sint mollitia iure. Autem incidunt repellat aperiam quas voluptatibus iusto est dolor. Velit at atque consequatur quaerat voluptatum optio maxime. Facilis adipisci animi necessitatibus illum magnam in explicabo iste quod. Voluptatibus quaerat excepturi veritatis. Consectetur quam nihil ut saepe. Error ipsa id nulla saepe nihil delectus alias. Iste tempora soluta eligendi optio nobis exercitationem in beatae omnis. Ea itaque quis. Perferendis consectetur repellendus fugiat temporibus commodi. Libero atque dolores porro quisquam dignissimos soluta recusandae. Aliquam similique nisi consequatur dolores quibusdam. Eveniet magni sint et. Totam ex molestiae nam unde magnam facere labore iusto. Quas voluptas sunt. Voluptas harum impedit. Officiis eum error. At dolor unde eveniet quis dolorem quisquam incidunt facere. Libero delectus veniam. Non eaque tempora cupiditate. Est ipsa eum quod distinctio. Beatae accusamus error accusamus optio harum. Commodi placeat itaque soluta temporibus dignissimos exercitationem odit.

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