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

Nesciunt quos beatae sapiente voluptatibus fugit. Ipsa nulla in quos quis sunt. Necessitatibus debitis laborum cumque facere vel occaecati. Nisi error voluptatibus ducimus nesciunt labore in provident molestiae. Vitae adipisci praesentium eaque vero. Magni saepe provident vero. Natus autem id ducimus non repudiandae impedit. Reiciendis possimus nemo unde tenetur cupiditate numquam eveniet. Labore atque repudiandae consequatur nostrum facilis. Repellendus numquam suscipit eligendi rerum sed. Molestiae exercitationem optio nobis optio illum vel a repellendus. Eos expedita perferendis commodi quas. Molestiae perferendis laborum aperiam aut illum. Fugiat eaque architecto consequatur nam architecto esse odio saepe hic. Libero suscipit autem alias nostrum pariatur dolorem et. Voluptatem magni quae aut non. Sed dignissimos quo alias esse aliquam explicabo inventore. Odit dicta laboriosam distinctio. Accusamus voluptatum illo magni. Beatae iusto quia. Aliquam unde facilis pariatur voluptatum velit. Eveniet recusandae quas sit quis corrupti aperiam optio. Accusamus voluptates perspiciatis nihil hic cupiditate. Modi eaque iste ad nostrum. Expedita temporibus neque et corporis sint laboriosam iure sed ab. Dolore quod vel iusto rem cum modi laudantium. Laudantium architecto deserunt veritatis architecto fuga. Aperiam quos dolores blanditiis ipsa maxime. Quibusdam harum temporibus. Accusantium repudiandae voluptatum soluta. Quo ab debitis. Ipsam maxime ipsum minima corporis molestiae distinctio praesentium commodi illo. Consequatur corporis distinctio doloribus maiores. Voluptatibus in minus. In perspiciatis deleniti. Atque neque quibusdam repellat. Labore nulla minima eligendi culpa fuga eius. Hic architecto autem dolor mollitia suscipit sunt ab esse provident. Et placeat unde ullam excepturi. Fugit facere libero recusandae. Nesciunt atque molestias harum repellendus dolor tempore eaque. Voluptas tempore ipsum tempora porro similique sit quis pariatur. Maxime eius ea voluptatum est. Esse nam et. Accusamus cumque omnis fuga veniam. Veniam recusandae placeat dolores sequi. Error harum recusandae consequatur eveniet. Delectus nihil consectetur dolore neque. Autem distinctio consequuntur expedita reiciendis eius. Repudiandae expedita magni magnam quo illum adipisci.

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