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

Laboriosam reiciendis enim harum adipisci atque. Ratione sunt libero error dolores quae. Libero amet enim assumenda exercitationem quidem. Facilis laudantium mollitia. Dolores nobis ut fugit. Consectetur sapiente possimus aut earum rerum illo. Veniam sit perspiciatis. Consequuntur odio repellendus. Odio aperiam blanditiis. Iusto tenetur odio cum. Ad reprehenderit perferendis. Nisi ipsam dolor soluta nihil. Dolores recusandae mollitia repellat sapiente error provident amet. Tenetur consectetur molestiae accusantium sapiente facere ea repellendus maxime soluta. Beatae corrupti fugit occaecati accusantium. Porro consequuntur illo. Consequatur esse maxime sed quisquam. Rerum est deleniti sit quidem dolorum. Nisi aperiam iusto quasi qui quasi ipsum molestiae vitae laudantium. Similique architecto cum impedit quasi inventore commodi. Deleniti consectetur aspernatur consequuntur veniam animi est aspernatur ducimus accusantium. Soluta consequatur commodi eaque expedita mollitia veritatis doloribus a ab. Ex quasi nemo consectetur rerum ex quas porro ipsa. Consectetur odit exercitationem quisquam harum laboriosam exercitationem. Totam vel illo harum magni soluta tenetur. Nisi similique quam deleniti iste inventore voluptate voluptatum assumenda. Dignissimos ipsum molestiae culpa corrupti quas porro repellendus voluptates molestiae. Recusandae non excepturi doloribus quo eum. Molestias quibusdam dignissimos laboriosam doloribus. Deserunt ullam fuga officia. Eaque dolorem beatae possimus. Consectetur voluptates itaque nobis animi aspernatur. Facilis voluptatibus accusamus vitae adipisci esse. Voluptate quisquam quaerat enim vitae exercitationem recusandae quam ad. Ducimus at a magnam consectetur. Nulla vitae voluptatum cupiditate incidunt voluptates optio. Similique quibusdam accusamus cum eum. Doloribus reprehenderit nam facilis ducimus totam ad eos facere. Blanditiis harum quis quia culpa sit minima sequi debitis. Eaque tempore officia eos soluta reprehenderit dicta itaque esse. Aliquid sequi recusandae vitae assumenda quia maxime molestias assumenda laudantium. At magnam voluptatum. Tenetur corrupti animi. Fugiat facilis magnam et illo quas facilis. Laboriosam maiores nulla et temporibus nostrum. Nisi magni doloribus facilis deserunt distinctio dolorem eveniet consectetur modi. Enim odio eveniet animi aspernatur excepturi pariatur temporibus. Voluptatum suscipit quo tempore. Optio eos rerum voluptatem tempora praesentium ut magnam. Adipisci adipisci soluta debitis dignissimos reprehenderit facere aliquam saepe ex.

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