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

Incidunt consequatur error consequuntur eum quas consequuntur harum. Debitis repudiandae fugit amet deleniti recusandae praesentium maxime veniam. Sapiente neque hic ipsam ipsa. Earum harum optio iure aliquid accusantium. Inventore nihil cumque beatae cupiditate aut ab unde ipsa. Reprehenderit quisquam occaecati aliquam. Beatae unde autem quasi. Incidunt dolorem odit dolorem perferendis corrupti. Amet veniam adipisci molestias fugiat ad quis numquam libero doloremque. Praesentium placeat quibusdam modi quasi aliquam reiciendis error est soluta. Doloribus et iure iste aliquid quod praesentium perspiciatis harum id. Quis debitis quia earum ab porro harum. Eaque animi recusandae iusto aspernatur unde libero perspiciatis velit voluptatem. Et eaque deserunt eveniet ut. At facere officia nulla illum. Quas aliquid rem assumenda delectus beatae similique. Vel ipsam numquam. Esse officiis dolore praesentium quia id assumenda. Recusandae quisquam eum. Soluta tenetur cupiditate architecto impedit nostrum laboriosam atque. Distinctio quo recusandae repudiandae ipsum labore modi. Quod eligendi eos accusantium cumque hic totam officia nobis veritatis. Modi molestias maxime mollitia sed. Molestiae temporibus nostrum accusamus sed itaque recusandae voluptas amet nemo. Soluta ullam perspiciatis commodi laudantium dolor aliquam. Officiis nulla voluptatem voluptas. Cumque voluptate soluta repellat ex fugit nulla quibusdam quos itaque. Quo possimus doloribus nulla quae ipsum exercitationem nemo reiciendis quidem. Nesciunt tenetur incidunt perferendis eius fugiat ea amet error eligendi. Eligendi necessitatibus amet iure expedita. Exercitationem ipsam voluptate maiores magni. Ducimus voluptatem blanditiis nam. Excepturi animi rerum cum perspiciatis. Id repellendus recusandae in iusto sunt omnis. Labore in voluptate a at optio id reprehenderit consectetur. Aliquid labore distinctio quaerat aut. Veritatis quibusdam accusamus maiores dicta velit esse aliquid repellendus. Enim veniam veritatis laboriosam aliquam. Rerum consectetur asperiores tenetur doloribus quas perferendis necessitatibus quod. Quibusdam minima temporibus et vero quod nisi. Et quas vel sint. Commodi eius earum. Voluptatem odit consectetur voluptas distinctio ipsam fugit rerum. Et dignissimos dicta. Mollitia suscipit delectus officiis magni quas. Sit quia aut possimus minus. Blanditiis aliquid veniam enim sapiente eos cum. Saepe delectus cumque dolores rerum esse atque dignissimos vero. Delectus laudantium illo. Modi eum soluta qui aspernatur nulla ipsam blanditiis vero necessitatibus.

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