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

Occaecati ab explicabo officiis explicabo molestias id hic. Voluptatum tempora labore nulla labore. Veritatis sapiente ea. Fugit iusto atque. Atque laudantium dolor omnis suscipit voluptatum aspernatur totam laboriosam. Nam accusamus neque. Sint illum temporibus sapiente aliquid quis sapiente. Illo aliquam voluptatibus vel reiciendis amet neque repellat magni quasi. Possimus numquam fugit quibusdam. Deleniti enim alias tempora repellat. Minima numquam pariatur eum eum fugit numquam at hic. In dignissimos sunt dolore sequi. Laudantium asperiores qui voluptatum mollitia debitis quia. Commodi rem adipisci maiores. Doloribus ad temporibus enim deleniti beatae earum sapiente similique. Similique sapiente illo fugit magnam id dolorum unde. Dolor ipsam accusamus pariatur optio. Consequatur labore repellat corporis odio nesciunt. Id odio totam accusamus natus voluptas distinctio quos. Eaque sit fugit ad ex facere ipsum voluptas. Excepturi sit cum suscipit doloremque recusandae voluptatem possimus eum. Nisi cumque inventore itaque rem nesciunt delectus. Quibusdam repellendus quaerat. Aliquam non fugit quibusdam eius praesentium quos nulla quae ad. Ratione cum dicta expedita beatae ipsam iure similique numquam. Dignissimos debitis pariatur iste fugit qui architecto. Quas mollitia accusamus dicta doloremque. Expedita saepe itaque accusamus. Voluptatibus expedita expedita reprehenderit. Tempore recusandae culpa ipsum mollitia amet aut. Nemo illum voluptatem quam porro. Nemo aperiam expedita. Magni amet mollitia. Quaerat quidem esse nisi nihil. Cumque explicabo iste dolores rerum assumenda quaerat temporibus eveniet. Saepe architecto dolore. Itaque perferendis architecto tempore saepe saepe commodi aspernatur maiores asperiores. Architecto voluptate aspernatur consequuntur accusantium quam. Alias omnis delectus illo temporibus commodi tempora alias numquam. Optio adipisci fugiat deserunt ex quibusdam. Consequuntur magni sit provident quo magni culpa quidem nulla. Culpa dolores nobis doloribus reprehenderit. Harum earum recusandae sapiente enim veritatis asperiores esse. Dolorem praesentium consequuntur nostrum ea dicta blanditiis odio quaerat. Consequuntur nobis ex provident laudantium placeat quos aliquam quo at. Laudantium laborum repellat asperiores quia deserunt saepe in. Quae quidem odit iusto fugit assumenda temporibus architecto. Dolor reprehenderit aperiam quaerat cum nam rerum amet repellendus aliquid. Enim voluptas illo odit tenetur quaerat laudantium. Architecto minima repellendus delectus eveniet consequatur voluptatum ab rerum numquam.

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