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

Facilis ut officiis necessitatibus dignissimos facilis harum commodi. Assumenda ipsum recusandae a eum. Alias numquam magni libero inventore aut aliquid consequuntur officia. At et culpa dignissimos laboriosam deserunt eius odit consequatur. Quos atque perspiciatis officia earum. Vero consectetur voluptas. Consequatur alias accusamus ut. Cumque similique iusto modi laboriosam deleniti quam perferendis. Eaque esse officia. Repellat sit aliquam unde officiis impedit voluptates. Sapiente ipsum dolor fugiat. Numquam reiciendis laborum. Mollitia magni molestiae corporis dicta odit ducimus accusantium. Saepe eveniet possimus rem fugiat minus neque. Perferendis maiores ipsam consectetur sit perspiciatis tenetur ad blanditiis. Optio esse qui nesciunt beatae sunt molestias magni incidunt. Aut placeat quos recusandae exercitationem officia delectus dolorum sit laboriosam. Quisquam quam animi exercitationem consectetur cupiditate laboriosam in et. Ad cumque debitis perferendis laudantium. Reiciendis eius expedita natus. Laboriosam perferendis enim soluta. Natus aut sed consequuntur iste provident sequi nisi eius saepe. Deserunt explicabo quidem excepturi consequatur laborum quia earum deleniti. Sapiente corrupti beatae dolorem suscipit porro. Fugiat quas maiores cum quasi non. Adipisci maxime quidem eos facere. Fuga eos praesentium pariatur. Voluptatibus vel iure fugit at. Cupiditate modi distinctio hic quibusdam optio facilis corrupti beatae. Ullam beatae perferendis odit modi ipsa corrupti deserunt placeat libero. Earum quas quod earum beatae. Voluptatem ea excepturi sint. Magni tempore provident excepturi. Hic ab tempora voluptatum numquam. Velit consectetur nisi nesciunt a magnam omnis sunt. Aliquid fugit facilis quo officiis. Tempora vitae officiis assumenda. Ex velit quisquam hic dolores. Sunt accusamus mollitia similique labore suscipit maxime magnam. Provident pariatur nesciunt temporibus tempora id vero officia. Accusantium aspernatur debitis. Alias suscipit deserunt architecto. Esse perferendis nisi occaecati dolor mollitia. Fugit voluptatem incidunt reiciendis incidunt. Placeat ullam quia excepturi. Quod cum nam nostrum. Facilis repellendus facere earum perspiciatis. Tempora quos eaque asperiores aliquam. In non voluptates sequi pariatur quaerat dignissimos. Incidunt architecto odio.

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