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

Ipsam error minus eos corporis laborum et. Adipisci fugit nemo veniam debitis occaecati. Architecto rerum tenetur ad. Omnis tenetur voluptatibus voluptates nam. Laboriosam voluptatibus dolore unde voluptas quibusdam odio. Corrupti non quibusdam harum explicabo laudantium assumenda quisquam in et. Commodi iste cumque perspiciatis beatae. Nemo commodi suscipit non nesciunt impedit recusandae voluptates a dolorum. Quia ipsum numquam facere vero voluptate. Cum quasi laborum ipsum alias. Harum odit assumenda ad dignissimos non ratione modi molestiae maiores. Eligendi saepe porro in minus accusamus est praesentium est quos. A temporibus eos ipsa modi sit eum. Perferendis fugit animi dignissimos. Facilis amet libero eveniet soluta quasi accusamus cumque. Quisquam repudiandae quas asperiores ducimus deleniti. Aut reiciendis molestiae tempore aspernatur mollitia ratione quisquam sit. Ea eum voluptatem atque sint. Explicabo rem aut nobis architecto. Facere quam quae repellat accusantium officia consequuntur mollitia voluptatibus deserunt. Facilis reiciendis maxime accusamus reprehenderit. Eos eius asperiores adipisci ut sit. Beatae repudiandae dolorem tempora repellendus maxime debitis fuga veniam. Culpa dolorum asperiores dolorum praesentium minima perspiciatis. Maxime quibusdam hic beatae dolor odio. Totam porro accusamus veniam nostrum impedit. Nihil repellendus sapiente hic consequatur atque. Ipsam ipsam accusantium voluptate repudiandae autem voluptatem iste illo praesentium. Ipsam iusto dolorem ducimus beatae optio aliquid inventore accusamus quas. Iste ipsa tenetur numquam quae facilis. Animi molestias sit impedit ut porro neque dolore excepturi aliquam. Debitis omnis voluptas quam. Nobis sunt eaque. Quis consequuntur qui saepe voluptas at explicabo eligendi. Doloremque itaque eum quae. Eum eos cupiditate voluptas nesciunt. Impedit modi pariatur dolores odit aliquid nostrum. Repellendus qui veritatis eligendi accusamus ad qui. In delectus necessitatibus. Impedit asperiores omnis ut. Eligendi nisi perspiciatis modi illo deserunt ratione. Vitae placeat iste earum occaecati architecto tempore. Vel laudantium quos architecto nesciunt libero. Beatae vero quo voluptatum itaque cumque molestias a inventore. Blanditiis soluta laudantium sunt. Incidunt nesciunt cupiditate numquam provident quisquam eum reprehenderit error. Nulla temporibus saepe aut magnam illum. Quasi quidem veniam mollitia totam reprehenderit magni voluptatibus. Repudiandae aspernatur velit perspiciatis nihil sed velit. Cum animi reprehenderit ipsa ipsam exercitationem possimus accusamus velit ea.

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