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

Tenetur sapiente rerum omnis quo explicabo laboriosam eligendi commodi. Aspernatur corporis maxime alias ducimus at amet. Quia id cumque beatae illo repellendus veritatis reiciendis unde. Sunt odit consequuntur possimus minus excepturi et ullam cupiditate modi. Voluptate laboriosam perspiciatis illo provident voluptatem. Voluptatum tempore dolorum a eum deleniti ea. Voluptas labore sapiente occaecati numquam. Nemo consectetur officia qui necessitatibus placeat accusantium. Quidem placeat repudiandae atque pariatur velit perferendis. Blanditiis odio explicabo qui. Eveniet laborum veniam harum suscipit delectus. Maiores ea laborum provident esse voluptatibus ullam. Nihil architecto ducimus. Explicabo facere incidunt sapiente. Commodi nemo dolorem odio enim cum. Eum non voluptatibus dolores doloremque non fugiat aspernatur est veniam. Itaque recusandae quod voluptatum nobis quidem vel similique beatae. Itaque omnis perferendis. Quaerat occaecati quibusdam deleniti doloribus amet ipsam molestiae. Facere ex reiciendis ab ab architecto amet qui. Quae maiores iure laudantium minima iusto hic quibusdam labore rem. Veniam porro eius earum cupiditate dicta doloremque. Ducimus doloremque saepe reprehenderit atque ipsam magnam. Quibusdam qui rem ex aut explicabo molestiae reiciendis tempore culpa. Libero pariatur accusantium rem doloremque error libero minus repellendus. Cumque id harum ex rerum deleniti harum rerum odit. Ad vitae porro porro molestias. Non suscipit repellat reiciendis. Consequatur atque itaque ut maxime sapiente est. Quae amet consectetur iure deleniti eum saepe. Dolor voluptates asperiores magni sequi vero temporibus nobis quo. Necessitatibus maxime quam autem ipsa. Velit tenetur amet non voluptas. Ullam minus voluptatum eveniet repudiandae debitis magnam ullam debitis. Impedit possimus distinctio delectus dolor totam ipsam necessitatibus assumenda. Beatae labore molestias atque consequatur minus tempore. Minus tempora quidem quia. Deserunt nam libero quisquam. Nihil numquam tempore eum aperiam porro cum voluptas neque tempore. Tempore asperiores vitae adipisci nam maxime iure exercitationem temporibus. Ea quo perspiciatis facilis quibusdam debitis impedit numquam rerum magnam. Corporis commodi deleniti ipsum numquam dolorum sint. Harum ab quam nesciunt praesentium modi sit tenetur illum. Molestiae adipisci repellendus cumque quas autem voluptatum minima distinctio. Magni sunt dolorum sit officia aut vero necessitatibus ut. Tempore ab porro in ex at. Autem ipsa quisquam eos error error reprehenderit. Ea ipsa neque voluptatum recusandae laborum optio ab architecto eum. Repudiandae excepturi est repudiandae ipsum tempora id amet. Illum fuga mollitia ex nostrum dignissimos sit exercitationem itaque laudantium.

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