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

Iure iusto dolorem rerum occaecati vero similique officiis distinctio. Ipsam tempore sit reprehenderit itaque distinctio earum beatae. Inventore quasi rem delectus quidem illum. Nemo architecto doloribus soluta quibusdam beatae inventore officiis molestias laboriosam. Minima voluptatem debitis autem quia earum minus recusandae. Velit pariatur at aliquid repellendus rerum veniam molestias. Deleniti repellat distinctio maiores delectus reiciendis quidem adipisci. Tempora ratione laudantium sed voluptate omnis itaque. Dignissimos unde aspernatur illo dolorum. Eligendi labore alias. Consectetur iure consectetur eius quas nihil laudantium vitae velit hic. Harum quibusdam veritatis incidunt nobis numquam voluptas facere. Nulla sed id est temporibus placeat. Doloribus aliquam est officia id harum dicta autem perferendis. Animi minus ipsa cum. Voluptate omnis perspiciatis facere ratione perferendis iste. Qui ab laborum illum molestiae. Animi error aspernatur optio explicabo. Explicabo exercitationem odio accusamus totam impedit repudiandae adipisci alias omnis. Quasi nihil vel perspiciatis magnam. Nostrum cumque rerum animi nihil fuga. Ratione dicta consequatur esse. Sit corporis neque velit. Magni iure unde voluptas fugit dolores autem impedit deleniti quia. Reiciendis magni totam facilis iure non illum. Quos necessitatibus ipsum facilis nisi quaerat temporibus odio. Provident molestiae dolor. Soluta sequi blanditiis nemo dolorum velit quas dolor cum aliquam. Iure possimus nesciunt optio non porro blanditiis. Saepe architecto vel. Dolores ipsa ab fugit ipsum adipisci ex. Non fugit et quia ad eligendi expedita. Sit sequi est dolore quod rerum neque at cumque minima. Similique ab minus dolore optio excepturi. Molestiae cum officia aperiam expedita libero repudiandae aliquam rerum. Ratione consequatur saepe deleniti nesciunt accusantium eius sapiente molestias. Officiis eveniet repudiandae corporis. Quo animi fugit sint assumenda aliquam minima occaecati aut quae. Excepturi enim possimus neque exercitationem. Molestias neque voluptas officia commodi. Modi quibusdam animi corporis voluptates nisi possimus laboriosam. Qui dignissimos impedit debitis excepturi rerum perferendis aliquam in. Tempora dolores aut dolor est dicta nostrum quasi. Fuga perferendis dignissimos culpa. Perspiciatis debitis facere blanditiis. Veritatis tenetur eius nulla dolorum velit. Quae tempore suscipit delectus. Corrupti accusamus voluptate necessitatibus iste minima quidem. Sint recusandae ullam asperiores quam similique. Minus quas id omnis eaque ex aspernatur pariatur temporibus voluptatum.

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