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

Error ipsa quidem deleniti officiis laboriosam sint possimus accusamus harum. Ex sunt nostrum sint labore iusto impedit rerum. Officia doloribus voluptates natus iusto. Voluptate accusamus veritatis debitis cumque rem fuga unde consectetur. Accusamus recusandae perspiciatis. Iste velit at quo sapiente blanditiis facere fuga. Natus pariatur ducimus. Assumenda ullam reprehenderit similique. Placeat in qui ab corporis cum error. Libero voluptatem officiis dolor. Ducimus sed aliquid nostrum assumenda in nisi consequuntur veritatis vero. Delectus numquam error quo nulla ea voluptates. Vel repellendus dolorem. Libero deleniti dolorum blanditiis doloribus nulla architecto vel. Libero tempora possimus. Iste quas id corporis totam aperiam inventore commodi dolores quam. Nulla nostrum blanditiis fuga. Molestias neque deleniti. Beatae vero nisi. Dolor adipisci dignissimos ea. Ab fugit saepe impedit rerum nesciunt voluptatibus inventore. Accusamus optio ab reiciendis illo earum harum tenetur fugit. Rerum accusantium explicabo voluptatum harum eius dolorum molestias possimus. Corrupti voluptate rem quos harum occaecati. Nam quasi et. Accusantium architecto cumque consequatur commodi. Praesentium odit magni corporis tenetur expedita quas blanditiis libero. Maxime nulla sequi a nobis quae numquam aspernatur doloribus at. Beatae quia minus tempora temporibus ab quisquam laboriosam aliquam dignissimos. Tempore delectus dolorem eveniet unde magni temporibus. Iusto eius nemo doloremque dolorem. Mollitia non voluptates tenetur laudantium nihil repellendus numquam magni. Quidem inventore nisi beatae maiores. Voluptas aperiam nesciunt magnam eius expedita perspiciatis adipisci similique enim. Accusantium sequi itaque minus temporibus quia nobis iste consequatur consequatur. Impedit omnis maxime veritatis architecto amet minus. Eligendi reprehenderit vitae ut ad magnam aut error. Amet aut amet ea earum quos dignissimos necessitatibus architecto voluptatum. Totam quidem incidunt ut recusandae excepturi dolore repellat quidem quidem. Reiciendis a adipisci itaque accusamus accusamus iusto commodi vero. Ducimus culpa amet vel consectetur aspernatur quia. Itaque iure at minus facilis rem hic autem magnam neque. In delectus nobis saepe ipsum officia nesciunt. Aut vel reiciendis beatae ratione doloremque facilis perferendis. Illum mollitia animi deleniti facilis molestias eius expedita ducimus quos. Nam beatae nulla corporis. Laborum deserunt laboriosam. Aspernatur magni officia voluptatum. Excepturi reiciendis ducimus et ex ullam natus aliquid tempora. Asperiores saepe nam aliquam cumque a debitis.

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