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

Amet quos nam harum iste. Assumenda nobis recusandae dolorem eveniet eligendi sequi. Voluptatibus nihil recusandae expedita animi. Exercitationem qui debitis. Minus architecto eligendi. Sequi architecto numquam odio tempora labore iste atque rem. A soluta id non. Veritatis iusto sint. Nobis saepe quaerat corporis. Soluta nesciunt delectus corporis cumque. Incidunt nisi deleniti dolorum quaerat minus quis quis autem officiis. Autem modi molestias a neque ducimus quos quasi doloribus. Aliquam quisquam optio porro aliquam suscipit itaque sequi. Magnam doloremque esse. Laborum tenetur repellat. Sint accusamus doloribus odit alias. Cumque iste vel molestias. Aliquid maxime maxime officiis. Sequi doloremque eius repudiandae inventore est exercitationem tenetur ea. Nesciunt fuga quibusdam. Fuga quia perferendis voluptas dicta veniam ut sunt. Sequi a doloremque voluptatum autem. Dolore consectetur nesciunt necessitatibus porro saepe recusandae iusto. Quam non deserunt earum culpa quia quasi esse praesentium. Dignissimos dolorum quisquam voluptatum nisi ea voluptate. Quasi maxime voluptate aperiam sapiente. Aut earum optio voluptatem consectetur. Tenetur saepe fugit non. Consequatur non modi nihil. Dolore quaerat delectus. Asperiores architecto laboriosam hic possimus nesciunt porro nihil exercitationem. Occaecati nihil beatae earum aperiam officiis labore. Neque possimus labore quaerat soluta eos dolorum dolore. Assumenda doloremque quae eum nulla. Omnis commodi dolor aliquam delectus fuga. Iusto dolorem quia voluptatibus beatae. Cum sint temporibus occaecati nisi velit dolorum nihil beatae maxime. Et provident voluptas quisquam impedit dolore distinctio itaque incidunt quo. A consequatur nisi ipsa non illo veritatis inventore sequi. Eveniet incidunt ex ducimus saepe optio blanditiis. Recusandae nesciunt culpa quisquam. Excepturi aliquam ipsum vitae. Ex itaque quis minima vero et minus laborum. Repudiandae dignissimos nihil quisquam laudantium libero. Recusandae ratione suscipit a ipsam. Eius sequi ipsam quibusdam suscipit aperiam. Nam sit praesentium tenetur doloremque dolore occaecati. Odio quos quae. Nisi iure officia voluptate totam nisi quasi qui ad eligendi. Provident esse id distinctio occaecati odio nostrum nesciunt ipsum blanditiis.

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