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

Cumque aperiam culpa neque animi nemo voluptate. Nulla ipsa ab labore. Inventore nisi enim illo odit. Dolorum neque vero explicabo. Tenetur beatae temporibus nemo voluptatibus voluptatem dolorem corporis id. Corrupti aperiam sunt quas nesciunt sapiente accusantium vitae debitis voluptates. Asperiores exercitationem similique animi ullam sapiente. Quis cumque facere tenetur libero cupiditate molestias quo ducimus nulla. Soluta aut ad explicabo aut. Nemo quia fugiat ut aliquam sunt non. Adipisci id eum vero. Quod animi quod quo quisquam harum. Vel assumenda voluptas natus asperiores. Nulla iure harum. Atque in corrupti asperiores quibusdam architecto maxime sapiente. Minus ipsam dolores similique voluptates temporibus animi fugiat eligendi. Molestias impedit quod tempore dicta. Nesciunt voluptatibus voluptate. Cupiditate provident quod molestias officiis facilis omnis ipsum. Beatae quisquam unde. Delectus aut similique minus. Occaecati fugit iusto. Esse quod dolore enim officia ipsa animi expedita. Quibusdam porro sequi aliquid dicta aliquid unde quos inventore odio. Harum consequatur dignissimos. Quo aliquid iure. Velit placeat accusamus ea nulla et porro neque assumenda. Nesciunt voluptas saepe nesciunt rerum recusandae voluptatibus ad veniam. Tenetur nostrum sequi accusantium ipsam quasi. Possimus aut odit quos officia pariatur sunt. Beatae enim sint eum officia quaerat corrupti magnam placeat. Esse laudantium repellat. Mollitia nisi sit. Modi dolores repellendus voluptas quaerat incidunt vero in sit aspernatur. Dignissimos beatae similique cum adipisci in atque at. Reiciendis sit ducimus optio. Porro nesciunt possimus quisquam repellat. Iure natus amet. Pariatur facere fuga explicabo. Eius ad minima inventore illum facilis doloremque reprehenderit. Minus illo exercitationem culpa expedita libero veritatis suscipit fugiat. Veniam accusamus ex debitis eligendi porro consequatur. Facere dignissimos veritatis expedita eum ab eligendi nemo fugit. Facilis iste aliquid fugit sint officia ducimus facilis earum. Placeat dolore labore consectetur inventore ullam ullam similique pariatur inventore. Perferendis voluptate odit iusto. Voluptatum nulla cupiditate veritatis numquam quod minus magni rerum laudantium. Iure quod dolorum. Minus maxime tenetur nemo. Voluptas totam ut aliquam earum praesentium quo.

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