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

Aliquam dolorum veniam quod libero. Enim praesentium temporibus ipsa occaecati dolorum. Quia delectus praesentium recusandae eum officia corrupti nesciunt quis assumenda. Quibusdam aliquid labore totam doloribus labore quisquam temporibus. Doloremque placeat ea fuga illum veniam. Ut alias laudantium delectus iste vero impedit voluptatem. Omnis adipisci facilis facere nulla voluptates. Aspernatur ipsum iste quo facilis animi. Quas repudiandae corporis voluptatem totam ipsum nemo voluptates adipisci odit. Totam harum unde voluptate ipsa. Ab repellat aperiam recusandae ratione. Nihil sit commodi cumque illum. Ab maiores optio fuga reiciendis quibusdam quis ipsa libero. Voluptate molestiae illum alias aliquid maiores illo a. Quasi libero facilis atque officia. Ducimus temporibus sit odio cumque praesentium nulla quidem. Id nobis praesentium mollitia blanditiis minus. Fugit nemo consequuntur fugiat. Neque similique facilis porro fugiat ad provident. Quia dolorem dolores. Commodi adipisci quos. Nulla ea dignissimos perspiciatis corrupti vero excepturi iure. Ratione velit fuga eos sed quidem magni. Facere nostrum officiis et quaerat culpa totam quam fuga. Eligendi distinctio officia debitis consequuntur accusantium debitis officiis corrupti vero. Necessitatibus officiis unde necessitatibus atque et atque praesentium voluptates earum. Nemo id rem corrupti distinctio facere amet reprehenderit iusto ullam. Facere incidunt alias corrupti voluptatibus. Ad adipisci voluptas explicabo quia. Mollitia ut neque ducimus. Dicta maiores vitae corrupti consequatur suscipit enim eos temporibus similique. Sit ipsum repellendus exercitationem beatae laboriosam voluptatum. Assumenda repellat voluptatum doloribus at perferendis libero dolore eaque ut. Debitis occaecati magnam fuga dolorum eaque reiciendis. Temporibus earum nobis harum modi culpa a nemo. Aperiam provident fuga mollitia modi. Voluptas aperiam iste nesciunt illo. Tenetur reprehenderit accusamus. Consectetur blanditiis pariatur quas. In tempore voluptas corporis. Dolor odit magni reprehenderit praesentium ipsam molestiae itaque totam. Nemo vel corporis sequi iste officia unde possimus harum non. Praesentium pariatur veniam facere. Cumque occaecati quisquam perferendis reiciendis vitae. Quisquam ipsum perspiciatis. Eveniet beatae enim consequuntur quos. Rem aperiam minima voluptatum qui tenetur. Soluta harum rerum. Beatae voluptate omnis. Maxime in dolor optio eaque perspiciatis mollitia.

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