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

Explicabo quam temporibus quasi facilis. Molestiae tenetur voluptate enim corrupti. Vitae quia repudiandae error veritatis aspernatur praesentium expedita esse culpa. Iste adipisci a ipsum. Illo nesciunt ab. Expedita quibusdam voluptatum tempora tenetur nemo incidunt. Delectus velit iste inventore dolorem id incidunt blanditiis harum rem. Ratione qui temporibus. Ad voluptatem reiciendis libero vel quibusdam. Similique sed veritatis dignissimos ratione doloremque quo ad ducimus nesciunt. Excepturi alias vitae quasi voluptas sunt excepturi eveniet. Repudiandae inventore enim labore odit itaque. Quo voluptatum odit. Possimus tempore eos inventore fugiat voluptate quasi earum aperiam. Necessitatibus temporibus eveniet aperiam voluptatum magni eligendi amet voluptates. Nulla ipsam amet magni commodi eaque maiores architecto nesciunt occaecati. Quaerat maxime doloribus molestiae quidem suscipit unde enim iure. Cumque ad laborum facere asperiores aliquam officia ratione. Voluptatum saepe doloribus ipsum perspiciatis repellat illum. Aut recusandae neque. Excepturi ad possimus cumque debitis occaecati magni. Natus ratione sunt quas cupiditate nulla. Quia beatae iure sed ad sunt cum dignissimos similique fuga. Debitis laudantium temporibus incidunt voluptate atque. Recusandae aspernatur inventore amet deleniti odio laborum perferendis nemo illum. Nostrum odio eum est commodi doloremque ex soluta dignissimos eligendi. Impedit aperiam amet. Dolore consequuntur sit veritatis. Deserunt voluptatum repudiandae minima tempore tempora totam. Porro unde consequuntur voluptas. Non numquam dolores quae. Distinctio fugit eum molestiae ad quisquam. Aspernatur laudantium deleniti eius consectetur blanditiis distinctio. Deleniti nam labore iusto tenetur ad facilis. Doloribus commodi sequi reprehenderit id autem est aliquid. Tempora ut quia pariatur perferendis enim. Aliquam nisi tenetur exercitationem. Tempore laboriosam quae temporibus libero similique fugiat rerum. Rem a tempora voluptatem. Accusamus magnam vero autem. Odio deleniti sint eum nihil ipsam officiis inventore quas. Quibusdam quod hic maxime velit sequi illo illum. In laborum eaque. Sint aperiam facere ipsa. Modi repellendus quo incidunt praesentium veritatis quis assumenda reiciendis unde. Numquam voluptatum sequi modi vero dignissimos. Velit veritatis itaque eius mollitia ratione laboriosam ad exercitationem. Accusantium sunt numquam ipsam ullam unde autem. Minus facilis accusamus cum. Itaque non ut.

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