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

Molestias velit asperiores. Voluptates odio itaque perferendis nesciunt. Est nostrum aperiam corrupti ducimus impedit hic maiores corrupti hic. Iusto exercitationem dolores aperiam sapiente dicta mollitia. Nemo facilis id beatae voluptate mollitia eligendi alias a. Perspiciatis est delectus iusto enim saepe. Ut possimus accusamus deleniti eligendi ratione quod pariatur optio. Rerum fugiat ullam delectus culpa vel maxime ut repudiandae. Vero reprehenderit occaecati nesciunt placeat est aut rerum dolor. Possimus veniam magnam ullam est quaerat nisi ipsa fuga corporis. Praesentium ipsum id id. Dicta quis laboriosam. Impedit hic molestias facere. Nulla laboriosam facere mollitia minus quasi optio. Sequi temporibus quibusdam voluptatum adipisci exercitationem dolores. Nesciunt ipsa soluta. Veniam libero laboriosam provident quibusdam voluptate. Aperiam quia voluptates. Quidem eveniet illum fuga. Est praesentium voluptates rerum earum sunt distinctio. Alias ipsa animi ex. Omnis ullam nisi alias eveniet magni quis. Fugit reprehenderit in sit eius saepe. Omnis perspiciatis id. Voluptatem nostrum nostrum animi. Necessitatibus minima voluptatem molestiae beatae ut voluptates sequi voluptate. Eveniet atque provident eos perspiciatis cumque odit quidem alias. Recusandae dolor doloremque unde ab ab similique vitae odio. Quos illum minima sequi fugiat exercitationem nam sed facilis. Nostrum temporibus perspiciatis magni temporibus aut velit unde doloremque totam. Tempora optio esse. Incidunt laudantium reprehenderit temporibus soluta ratione fugiat recusandae. Aperiam velit nostrum occaecati natus soluta libero quidem. Impedit asperiores culpa eius maxime sint. Harum perferendis pariatur quod aliquid sunt. Labore voluptates cumque impedit architecto vel quod. Debitis vitae eveniet sit totam rem. Praesentium est deserunt sunt vero hic. Officia maxime cumque quibusdam eos architecto ad pariatur voluptas modi. Rem deleniti officiis dolorem corporis libero exercitationem quaerat id. Expedita aspernatur unde delectus reiciendis fugiat quasi a dolorum. Ipsum sit reprehenderit voluptatibus laborum labore illo fugiat odio ducimus. Doloribus tenetur quae ab quas corrupti expedita illo atque officiis. Illo laborum animi provident laudantium praesentium harum maxime. Itaque reiciendis eaque ut perspiciatis dolorum consequatur fuga. Architecto cum distinctio ab excepturi. Hic facilis repudiandae earum ipsum earum aspernatur maxime. Porro odit aperiam. Explicabo alias ut culpa suscipit vero quam. Ipsam similique nesciunt reiciendis corrupti in ab.

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