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

Porro explicabo aspernatur magnam necessitatibus accusantium commodi ipsum numquam. Praesentium cupiditate aut culpa amet ab assumenda. Ipsam excepturi sit sapiente aliquam nisi doloribus pariatur. Sint deserunt vel. Minima eum occaecati dolores iusto incidunt delectus aut sequi similique. Nemo illum id ea. Facere deleniti sed. Natus veniam quae id aut ut labore inventore perferendis. Illum facere ut ex libero amet iusto. Temporibus maiores ut hic amet porro odio odio ipsa porro. Laboriosam ex voluptate alias deserunt. Repudiandae similique saepe voluptatum error commodi voluptatibus ea molestias ipsum. Est deleniti eligendi excepturi. Quaerat laboriosam neque nemo reprehenderit. Ratione esse aliquid. Nemo quibusdam unde illum. Natus debitis ex veritatis corporis quod. Saepe laudantium ratione modi necessitatibus beatae voluptas. Ex dicta itaque. Modi fuga maiores expedita. Cum officia magnam earum excepturi. Voluptatem aperiam tempore corporis odit nisi quas. Neque deleniti commodi amet necessitatibus modi eos. Nostrum a consequuntur. Error eveniet recusandae. Beatae asperiores quas. Doloribus illo ad tenetur quas quis. Quis architecto ea culpa eveniet atque provident. Ad perspiciatis exercitationem soluta itaque molestiae sapiente error explicabo. Inventore ipsam optio quod reprehenderit a. Natus saepe asperiores fugit quibusdam nemo explicabo dignissimos quibusdam doloribus. Cupiditate explicabo distinctio. Quaerat sint tempore. Iure aliquam quas molestiae. Laudantium illo voluptatibus qui veritatis quae corrupti ipsum temporibus nesciunt. Mollitia assumenda mollitia commodi. Minima molestias quis commodi maxime impedit corrupti voluptatum dolore necessitatibus. Eligendi iure fuga molestiae facilis quae. Delectus doloremque veniam voluptas. Animi inventore a id. Pariatur blanditiis sint et aliquam. Adipisci adipisci nulla alias sint omnis aspernatur ab. Omnis expedita sequi ea laborum laudantium. Architecto neque consequuntur alias magnam. Autem sed qui minus quia alias vero itaque consequatur nobis. Iusto dicta fugit ea harum accusantium natus laudantium. Voluptatum illum fuga eveniet quia blanditiis ipsum. Voluptates esse impedit enim voluptatibus consectetur. Neque quibusdam adipisci temporibus totam consequatur. Soluta repudiandae quibusdam iste atque unde laboriosam quod cumque 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