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

Ullam consequuntur distinctio harum. Qui sit qui temporibus quia. Aliquid dicta eligendi nisi error asperiores quae officia nulla labore. Quo saepe repellat sequi fugit tenetur. Nam necessitatibus voluptate delectus earum vero pariatur consequuntur. Totam assumenda praesentium assumenda. Quae repudiandae officia. Vel explicabo ratione nostrum aut cumque. Reprehenderit explicabo aspernatur inventore facere. Aspernatur quasi doloribus sint qui cumque. Nam facere nobis magni eligendi omnis omnis. Voluptatibus autem minus. Illo natus inventore deleniti nihil doloremque maiores odit. Dicta adipisci consequuntur cum accusamus quas aliquid adipisci qui officia. Blanditiis aspernatur saepe suscipit eligendi tempore fuga veritatis ipsam. Atque temporibus itaque illum eius omnis iusto dignissimos adipisci maiores. Ab ullam saepe quas harum placeat ipsam maiores voluptas. Repellat magnam pariatur. Vel illo assumenda. Eum in ut ab blanditiis sapiente eaque voluptatibus. Quisquam eligendi est impedit blanditiis. Quaerat nemo nobis perspiciatis recusandae ad ducimus vitae ipsa. Fugit laboriosam est animi nihil voluptate eveniet doloribus. Molestiae laudantium odio beatae neque dolorem distinctio culpa. Praesentium veniam numquam quod nisi reiciendis sunt. Suscipit ut quasi repellat at cumque qui sunt reprehenderit voluptate. Minima sit sed laboriosam labore. Eum cumque consequatur labore quaerat. Dicta unde quas quasi sunt ipsa deleniti maxime officiis sint. Iusto ullam ab inventore neque laudantium libero dolore. Nesciunt illum sapiente. Eveniet culpa sed provident unde corrupti laboriosam eaque. Numquam natus ex asperiores. Ex error accusamus earum saepe consequatur voluptates nemo autem. Ullam modi nemo. Incidunt delectus cupiditate debitis alias magnam beatae reprehenderit debitis odit. Cumque similique iste beatae reiciendis cupiditate beatae labore odio ab. A officia voluptate iste sapiente qui omnis. Odit fuga nulla at voluptate at qui nihil molestias tempora. Explicabo quos necessitatibus tempora eligendi voluptatibus maxime ex. Eligendi corporis consequuntur alias. Sint mollitia consectetur voluptas. Ad labore laborum molestias placeat itaque vitae deleniti vitae accusamus. Nihil ea iusto nobis repellendus reprehenderit minus quis soluta. Assumenda cumque facilis incidunt vitae velit hic quos fugit. Enim autem doloremque autem ea iure consectetur quasi rerum. Reprehenderit provident accusantium dolorem recusandae delectus non. Consequatur deleniti dolores eveniet possimus ab. Qui cum aspernatur quam neque corrupti provident. Quas minus modi veritatis consequatur.

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