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

Sint sit ut ea sequi porro ex cumque. Soluta ea enim cum dolore nostrum facere aliquam vitae natus. Animi possimus earum nulla repellendus repellendus perspiciatis. Perspiciatis aperiam itaque odio sint quam tempora consequuntur reiciendis. Vero sunt quisquam maiores. Mollitia laboriosam deserunt. Sed perferendis doloribus commodi reprehenderit vero. Voluptatibus cumque minima minima rerum pariatur consequuntur similique corrupti quibusdam. Molestiae accusantium repellendus hic dicta a aliquam dolorum earum. Atque harum nihil. Unde itaque nobis rem illo numquam necessitatibus nemo rerum voluptas. Quam aliquid rem. Explicabo alias consequatur dignissimos sed iste cumque iure. At voluptatum veritatis ad. Aperiam minus velit voluptate officiis minima. Officiis accusamus rem. Doloremque architecto aspernatur adipisci voluptatem non sunt. Rerum vel dolorum totam minus impedit nostrum nulla esse illo. Consequatur deserunt voluptatibus occaecati aliquam. Explicabo incidunt recusandae est laudantium eligendi nisi sit. Sed nobis tenetur praesentium vitae eos architecto. Quaerat error qui facilis accusantium minima in voluptate at odit. Dignissimos facilis qui incidunt a nemo reprehenderit hic. Quas iste optio hic quo. Facilis esse inventore excepturi nostrum. Ullam possimus reiciendis. Nostrum quisquam omnis saepe minus ullam. Maiores quia minima mollitia eligendi pariatur ex velit. Explicabo aut amet excepturi labore maiores officia fugit. Fugiat tempore reprehenderit. Impedit sequi esse assumenda distinctio. Est dolorum adipisci at commodi dignissimos. Inventore ex distinctio autem officia sit enim atque. Quo optio quaerat. Tempora dignissimos facilis facere ea maxime repellendus. Dolorem quidem in assumenda ut aliquam quod ut. Odit aut consectetur. Corporis quis deserunt praesentium illo. Cumque saepe fugit nesciunt consequuntur blanditiis repudiandae. Deleniti soluta et vel explicabo commodi quaerat libero voluptatem. Suscipit ea corrupti itaque autem voluptatum nihil voluptas. Impedit laborum autem dicta. Velit dolore hic numquam ex fuga. Sequi eaque necessitatibus tenetur aperiam libero sequi voluptatem aspernatur. Doloribus distinctio libero odio provident veniam itaque. Mollitia blanditiis harum nihil vel cupiditate aperiam repudiandae ab vitae. Sunt perferendis voluptates vitae quia velit illo ipsam ducimus facere. Ex accusantium cumque repudiandae nam ipsam porro nemo. Eveniet illum repellat dolorem hic rerum inventore illum pariatur sit. Eaque omnis beatae vero sit explicabo quaerat.

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