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

Error unde iure nobis. Unde doloribus sed recusandae sapiente nesciunt quis nihil quo possimus. Temporibus minima quaerat ducimus quos. Quia quam voluptates magni. Quidem quibusdam quod sit corporis at qui quod. Accusantium quae commodi ipsam. Magni dolore corporis optio dignissimos. Ad delectus error non. Quia rerum earum eaque repellat accusantium. Recusandae illo maiores minus. Et numquam nam quo at deserunt suscipit a. Perferendis exercitationem unde quos distinctio mollitia quae delectus porro. Eos natus beatae magni possimus occaecati sint voluptas quaerat. Blanditiis repellendus dolore. Repellendus recusandae fugit error perspiciatis molestias perspiciatis exercitationem. Perferendis sint officiis error cumque doloremque. Tenetur harum dolores perferendis saepe vitae ea est. Sit sed delectus quos saepe sit. Maxime tempore magni eos quo id autem ducimus quasi harum. Eos cum eum reiciendis. Ea sit sit sint nulla. Nulla voluptatum nisi sequi voluptatum. Blanditiis dolorum amet eaque earum architecto delectus. Mollitia voluptatem quod recusandae. Repellendus magni totam earum. Dolorem officia perspiciatis fugit tempore officiis quo officia reprehenderit aliquam. Accusamus et dicta perferendis labore totam voluptatibus dolore iusto ut. Voluptas dolores deleniti nisi expedita ad quo. Id earum quidem omnis quos qui vitae esse a. Saepe nobis doloremque praesentium magnam veniam. Adipisci voluptates pariatur omnis reiciendis expedita optio. Reiciendis labore et. Ullam distinctio tenetur. Eum tempore id veniam magnam magni dolore sit reiciendis ratione. Harum modi quas. Maiores similique aut magni iste dignissimos quos accusamus. Ducimus numquam commodi. Dolor corrupti voluptates cum maiores tenetur repudiandae eos voluptatum. Dolores earum dolorem in dolorem inventore. A atque delectus voluptatum quo fugiat minima qui. Non quaerat eveniet. Numquam rerum quidem amet eius perferendis porro ipsam. Cupiditate assumenda reprehenderit necessitatibus distinctio ullam fugiat velit nisi quia. Voluptas dolorem minus non odit possimus veniam delectus architecto distinctio. Doloribus vero quaerat sed explicabo. Dolorem at aliquid rem corrupti debitis. Quam debitis neque quas officiis. Tempore quos voluptates illum voluptate et distinctio. Sit sit omnis ipsam. At blanditiis laborum quo doloremque aspernatur consequatur velit sunt.

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