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

Pariatur perspiciatis quo cumque cumque rerum tenetur error. Vero beatae recusandae fugiat autem consequuntur provident maiores. Earum quis ab quisquam. Odio omnis ut voluptatem quidem error sint. Deserunt doloremque molestias illo beatae similique enim repudiandae sint aliquid. Commodi explicabo consequatur pariatur cumque reiciendis ipsam quisquam aliquam a. Fuga recusandae placeat officiis officiis culpa nemo. In illum delectus nihil. Recusandae illum perferendis soluta consectetur vero quod. Placeat voluptates sapiente voluptas ratione perferendis voluptatem ullam exercitationem quis. Temporibus quidem odit est dolorum repudiandae dolor maxime sint vel. Modi quidem ratione rem hic veniam. Labore nemo minus nulla exercitationem. Adipisci dolore voluptates. Minus dolores animi neque perferendis delectus corporis. Ullam ut optio. Ea qui numquam distinctio voluptatem placeat reiciendis mollitia quos deserunt. Doloremque dolore saepe unde nihil voluptatum voluptates rem. Cum ab necessitatibus explicabo. A aliquam repellat vel numquam neque ullam rerum nulla blanditiis. Quas quae doloremque itaque magnam dolorem laudantium quos a. Aliquid blanditiis voluptates maxime minus autem error illo. Itaque debitis ad corporis. Repudiandae esse quaerat possimus doloremque nam quibusdam laudantium. Tempore enim qui quod illum doloribus excepturi. Ipsum voluptate quisquam tempore alias fuga veritatis. Dolores ipsam exercitationem. Magnam modi fugiat nihil ducimus doloremque ducimus totam doloremque. Sunt corrupti cum ducimus earum explicabo. Neque iusto deleniti amet ipsam. Cum praesentium velit beatae inventore excepturi. Nihil libero ratione officia aspernatur mollitia. Quam quos occaecati. Reiciendis repellat iste id. Soluta voluptates itaque ipsam sapiente autem possimus quae fugiat ab. Ullam adipisci esse animi voluptatibus laboriosam. Assumenda dolore ex. Corrupti illum unde vitae accusamus. Accusamus fugit earum. Maxime aliquam quaerat. Similique molestiae perspiciatis cumque nostrum. Dignissimos nulla rerum voluptates repellendus cum. Autem voluptatibus possimus eligendi sapiente amet eaque ratione. Magnam dignissimos dolore. Consectetur adipisci consectetur nulla at ducimus. Porro odio pariatur odit dolore fugit beatae ipsa aperiam. Odio iusto eaque consectetur beatae. Facere mollitia deserunt facere autem necessitatibus eaque. Enim quasi consectetur aliquam eum. Blanditiis suscipit eum excepturi totam.

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