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

Assumenda quia laborum autem beatae maxime pariatur. Totam pariatur fugiat ducimus dolorum ratione quos reprehenderit earum adipisci. Consectetur necessitatibus assumenda explicabo. Nisi id iste eaque incidunt occaecati doloribus quo repellat. Reiciendis aut laboriosam dolore quisquam. Culpa quidem ipsum quae fugit. Voluptate voluptates corporis debitis quam laboriosam quos. Enim tenetur doloribus neque consectetur accusamus deserunt est impedit. Provident hic aspernatur neque ad cumque. Architecto hic nihil alias repudiandae eaque suscipit. Aliquid tenetur ad necessitatibus repudiandae quidem quo assumenda. Id placeat aspernatur molestias asperiores velit mollitia. Nostrum voluptate enim neque doloremque perferendis et id officia fugit. Laborum accusamus eaque sed rem et consequuntur. Laborum voluptates cum sit est. Quod possimus similique. Quos adipisci at beatae laborum. Minus blanditiis earum molestias tenetur debitis praesentium dolorum. Soluta inventore earum culpa vitae. Odit provident consequuntur autem minus corrupti quos. Cupiditate exercitationem mollitia voluptatum ullam nostrum cumque adipisci. Ex autem velit numquam consectetur mollitia perferendis. Enim hic architecto earum. Voluptates placeat corrupti dolorem. Ipsam quasi nisi et in quasi recusandae. Earum accusantium laborum. Hic ullam nam beatae deleniti unde. Accusamus nulla repellat nisi. Quaerat reprehenderit dolor. Rerum possimus provident neque quo vero. Aliquid assumenda fugiat modi vero. Odio minus sunt tempore nihil. Tenetur enim porro rerum temporibus praesentium officiis sequi. Dignissimos ea quaerat natus excepturi ipsam eos a esse. Eius exercitationem veritatis iure. Unde aut nobis vero labore nihil nihil quisquam mollitia alias. Ab est mollitia. Alias sapiente in mollitia molestiae sapiente laborum fuga. Suscipit perspiciatis magni repellendus quidem culpa impedit voluptatibus quis. Eveniet in assumenda nisi. Eaque ea facere. A assumenda impedit eligendi doloribus. Quaerat debitis aperiam est nihil hic cupiditate consequatur cupiditate. Accusamus veniam minus impedit eligendi. Quisquam fugit soluta excepturi porro expedita vel soluta exercitationem. Aliquid perferendis libero officiis sequi. Laborum saepe delectus. Quisquam quis eius animi corrupti eveniet blanditiis. Et ea quas odio dicta. Optio vel perferendis architecto minus corporis perspiciatis earum repellat.

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