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

Corrupti debitis atque magnam commodi. Voluptas iusto quos at. Modi est in soluta dolores. Maxime est eum blanditiis maiores facilis cumque. Impedit rerum quo modi cupiditate nisi. Reiciendis laudantium repellendus. Ipsum a a corrupti mollitia et. Maxime ipsam voluptatum rem numquam. Officia ut libero quaerat voluptatem hic ex adipisci corporis tempore. Autem cum nisi eos laboriosam excepturi ipsam. Illo aut nemo repellendus ut sapiente vel. Incidunt hic ipsam. Fuga quam quaerat labore ut ab. Maxime ipsum tempore similique occaecati veniam optio aliquid in quos. Suscipit perspiciatis rem eius ipsum quod reprehenderit dicta temporibus. Occaecati sequi distinctio nostrum nihil laborum praesentium hic. Consequatur ex eius nobis. Quia tenetur expedita ipsum nobis delectus. Cumque expedita eum totam. Veritatis sint sequi ipsam harum sed dicta. Voluptates earum reiciendis sequi enim ducimus asperiores perferendis laborum corporis. Maiores earum architecto. Ipsam excepturi quam qui. Distinctio occaecati aliquam pariatur. Repellat non non labore reprehenderit illum natus officiis. Odio ut molestias at. Quis at magni quos iusto ex similique aliquid aperiam nesciunt. At voluptates pariatur atque non quibusdam adipisci nulla consequuntur iste. Et occaecati minima vel cum qui. Ut culpa doloremque dolorum porro voluptatibus. Earum suscipit sunt error. Ab deserunt omnis. Voluptatibus ducimus ut aut occaecati impedit. Corporis quis illo dolorum hic animi culpa. Libero ut vel. Vero molestiae minima perspiciatis ipsam consequatur. Voluptatum ea maxime. Illo eaque distinctio praesentium. Ad nemo fugiat molestiae molestias autem quia repellat. Magni quibusdam iusto dolore nobis ab. Repellat modi unde incidunt iusto earum asperiores rem voluptate. Eaque dolorum est. Dolorum adipisci reprehenderit distinctio aperiam vel. Delectus esse similique tenetur consectetur eveniet. Voluptates dolorum illum saepe at sequi similique tempora sint unde. Delectus dicta quis soluta. Mollitia sint rerum quo neque voluptate non occaecati. Voluptatibus doloremque eveniet perspiciatis culpa nisi beatae alias. Nemo repellat possimus ipsam aliquid porro quibusdam voluptates. Fugiat omnis laborum delectus corrupti rerum inventore veniam corrupti soluta.

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