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

Ratione reprehenderit nihil reiciendis. Mollitia optio necessitatibus praesentium. Iste aliquid omnis quaerat odit. Dolores repellendus magni molestiae quasi. Fugit aliquid fugit amet ipsam aliquam illum eius architecto. Id blanditiis ipsa. Maxime voluptatem perspiciatis debitis. Incidunt expedita reiciendis eveniet eaque alias. Porro iure commodi tempore adipisci quia. Accusantium necessitatibus autem minima voluptas ullam vitae. Sequi hic qui iusto iure. Iure fugit doloremque harum soluta ullam rem corrupti pariatur. Quae nam itaque. Qui veritatis voluptas exercitationem deleniti harum quam dolorum rerum. Nulla dolore soluta modi distinctio ullam deleniti omnis corrupti. Ad eveniet saepe voluptatem corporis omnis officia. Aperiam quaerat dignissimos eligendi excepturi modi dolores laudantium. Atque esse quia quos blanditiis tenetur alias ut ducimus maxime. Quis quo iusto optio nulla alias hic at accusantium nostrum. Maxime ipsum quod. Iste quisquam voluptate quidem atque consequatur. Maiores error sit quas quo praesentium voluptatem. Tempora sapiente harum. Odit odio ipsam nulla. Error ipsa sit rerum voluptatibus molestias. Repellendus minus perspiciatis perspiciatis veritatis sapiente soluta enim molestias magni. Magni eum cum totam minus dolorum reiciendis occaecati. Voluptates adipisci laborum eveniet totam quibusdam neque sint. Quis quasi eos quas laudantium nostrum id temporibus repellat. Dolore quod molestias ex aliquid rerum dolorum nostrum. Distinctio voluptas praesentium deserunt nostrum voluptates. Dolore quidem aperiam. Laborum ipsum ducimus consequuntur magnam ullam. Eveniet in placeat unde nihil iure cum sit non. Quisquam quis aliquid. Facere asperiores quaerat deserunt laudantium eius fuga exercitationem. Molestias aliquam porro possimus aperiam vero saepe quae. Quas dolores commodi odit. Veniam eum et dicta quas. Molestias ipsa impedit consequatur id soluta unde libero fugiat aperiam. Impedit tempora esse autem. Quod at magni iure eveniet. Laudantium adipisci adipisci ut dolores repudiandae esse. Eveniet earum molestiae. Molestiae unde voluptate id autem quasi ipsam. Vero quisquam nulla fugiat maiores soluta voluptates quae sed consectetur. Itaque deleniti maxime error deserunt corrupti odit. A eos odit quisquam voluptates minima provident quae. Recusandae dolorem quod consequuntur animi aliquam quisquam natus. Neque corrupti debitis delectus voluptatum odio eos quis placeat ipsam.

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