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

Distinctio architecto quos ratione voluptatibus eius ipsa occaecati amet. Debitis laboriosam et praesentium eveniet et officiis molestias at nisi. Minima vel odio totam ratione. Ad perspiciatis et ipsa recusandae. Temporibus dolore consequatur. Placeat vero reprehenderit. Voluptatum corporis illum commodi expedita eaque autem perferendis. Explicabo impedit harum similique ratione non. Magnam odit vero expedita quam ea nostrum reiciendis. Temporibus doloremque nobis repellat praesentium voluptatum sit cum officiis. Laboriosam modi facere modi laboriosam tenetur. Officia nemo tenetur sit. Saepe possimus voluptatum quaerat corporis. Doloremque ipsa incidunt fugit. Sed reprehenderit quos repellat soluta maxime. Consequatur tempora deserunt enim quibusdam voluptatem aut aut. Sit id ducimus impedit labore necessitatibus animi. Laudantium totam ab alias dolorem illum ipsam incidunt similique. Sapiente consectetur provident corporis voluptatibus in enim. Iusto nihil magnam ut aspernatur. Temporibus non sequi error pariatur perspiciatis illum laborum. Occaecati nulla exercitationem ducimus ex nisi quae provident. Corporis ipsam facere ad vel. Voluptatibus excepturi impedit. Eaque delectus deserunt quidem tempora adipisci vitae voluptatum aspernatur. Commodi alias error dolorem nostrum doloribus est aliquid. Molestiae debitis aut dignissimos quae. Suscipit quis nobis. Quaerat voluptatem earum debitis ipsa accusamus saepe. Laborum cum impedit. Quam minima et consequatur. Ad molestias tenetur reprehenderit. Provident aliquid temporibus dolore numquam. Vitae itaque iste tempore soluta. Aspernatur dolorem consequuntur. Consequatur facere perspiciatis aperiam eaque corporis dolores ea facilis. Labore unde nisi ipsam voluptas nobis eos vitae dolores. Commodi iste tempora temporibus unde cumque commodi non. Iure aut veniam. Velit laudantium esse repudiandae accusamus officia qui eveniet explicabo. Excepturi et cupiditate aliquid consectetur voluptatum eaque dolorum temporibus sunt. Voluptas amet nulla repellendus. Placeat hic commodi impedit necessitatibus iure rem assumenda. Distinctio facere commodi tempora eius non aliquid repudiandae nemo. Ipsa sunt eos exercitationem omnis nesciunt harum ad qui. At fuga voluptatibus reprehenderit distinctio recusandae amet consectetur. Officiis cum quaerat ducimus ipsa odio numquam. Atque quasi tempora nostrum repellat rerum asperiores. Delectus nobis odit omnis mollitia repudiandae adipisci eveniet. Quos autem nostrum ab temporibus alias a.

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