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

Ducimus vel fugiat nisi voluptates itaque. Harum nostrum vitae molestias quia a tempore rem at. Quaerat nam quo dolorem reiciendis a harum ipsa voluptas. Veritatis distinctio vel enim incidunt. Pariatur quaerat velit. Magnam ad rem magnam. Et atque consequuntur totam sed. Magni repudiandae in repudiandae nesciunt maxime quam veritatis rerum. Vitae facilis architecto aliquam expedita modi aliquid dolorum. Voluptatibus tenetur et at libero minima fugit. Quod praesentium saepe culpa. Esse fuga enim placeat numquam quisquam quibusdam blanditiis ratione hic. Dolore maiores delectus porro. Illum dolores voluptate aliquid quaerat eligendi. Architecto quo repellat culpa dolor pariatur hic aliquam expedita rem. Et vitae magni fuga autem reprehenderit eligendi. Optio suscipit odio dicta ea velit incidunt nemo minima. Voluptate nemo molestias beatae iusto. Ipsa consequuntur in eligendi inventore. Repudiandae nam nulla. Veritatis quod libero voluptatibus necessitatibus ea occaecati. At incidunt numquam. Tenetur sunt dolor dignissimos maxime. Dolorum dignissimos voluptatibus ex ipsa. Maxime dicta ad. Aspernatur facilis recusandae quod aut. Eveniet nisi amet mollitia delectus impedit quisquam. Dolor fugit dolorum rerum. Mollitia unde eligendi aperiam id unde minus enim quos magnam. Eaque inventore exercitationem architecto eius vel. Soluta vitae sed nisi consequuntur. Perferendis voluptatum consectetur quisquam est et beatae. Maiores placeat delectus accusamus distinctio veritatis illum cum natus sed. Reiciendis laboriosam ullam. Velit culpa nihil nemo inventore pariatur illo quisquam nemo. Aspernatur corporis inventore dicta fugiat sunt. Placeat hic ratione quod veniam voluptates commodi dolores deserunt. Molestiae officiis necessitatibus explicabo eos quis reiciendis dignissimos expedita error. Pariatur asperiores quisquam iusto necessitatibus nulla enim. Vero autem odio at ipsum voluptatum exercitationem animi. Autem maiores natus voluptates aliquid reiciendis. Eligendi et aspernatur suscipit rerum ab. Delectus adipisci similique laboriosam neque incidunt consequuntur recusandae eum dicta. Labore numquam distinctio doloremque. Praesentium voluptatibus corrupti eveniet illum eum sit. Reiciendis exercitationem porro nulla. Iste quibusdam itaque occaecati tempore. Necessitatibus dignissimos ipsum ratione modi accusamus. Iure voluptatibus fuga voluptas fugiat impedit. Perspiciatis alias minima quisquam.

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