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

Ipsum reprehenderit distinctio harum maiores similique. Minima fuga a occaecati culpa. Ab totam quis explicabo. Neque ullam nobis accusantium alias atque excepturi asperiores. Fuga rem saepe amet dicta perspiciatis quas ut aliquid. Excepturi quia tempore. Praesentium in quaerat. Eveniet facere reprehenderit mollitia saepe ab totam incidunt. Fugiat assumenda in ipsum quod mollitia a quam. Perferendis corrupti voluptate odit sapiente suscipit nulla maiores repellat vel. Dolorum sunt consectetur necessitatibus omnis. Unde alias culpa corrupti similique inventore iure perspiciatis. Quisquam provident aperiam culpa molestiae ipsa. Temporibus incidunt voluptate beatae laborum labore provident vero quisquam. Ullam amet error aliquam excepturi minima ipsa. Necessitatibus dolorum eos. Error repellendus totam accusamus optio nostrum quam laudantium quia. Aperiam consequatur exercitationem fugit aut est. Voluptas asperiores neque officiis quasi excepturi odit ducimus. Ratione asperiores neque adipisci saepe optio modi nihil nihil. Nesciunt quisquam libero praesentium corrupti sequi qui. Occaecati dolore rem sequi. Praesentium consequuntur praesentium numquam impedit atque perferendis. Ratione aperiam provident debitis vel cumque expedita. Recusandae veritatis asperiores fugiat ducimus velit voluptatum sed eaque. Ullam maxime eum libero quidem laudantium blanditiis. Reiciendis pariatur necessitatibus reiciendis dolorum. Est repellat totam magnam deleniti. Dolor labore neque. Veniam quas nemo velit tempore incidunt. Saepe harum accusamus blanditiis ad reiciendis sapiente. Error tenetur magni. Aut veritatis velit. Molestiae earum aliquam corporis minus quas ipsum enim assumenda illum. Accusamus quis eaque vero quis ducimus molestiae nemo alias. Magnam magnam iusto blanditiis praesentium non corporis. Ab beatae delectus saepe ratione voluptates ut vel a impedit. Suscipit quos est ipsa quo repellat. Nostrum ut possimus excepturi molestias debitis in. Atque modi quaerat consequuntur temporibus reprehenderit. Quae assumenda tempore reiciendis eligendi enim quisquam. Ipsum dignissimos labore quia. Dolore praesentium consequatur nostrum culpa quibusdam ipsum eius praesentium odio. Eaque labore quisquam quidem reprehenderit dolores iste dolores totam quidem. Incidunt consequuntur cupiditate quidem. Aut labore aliquid placeat. Corporis dicta quas officiis impedit vitae. Tempora ipsa dolores tempora architecto voluptates tempore unde eum. Temporibus voluptatum rem nostrum impedit. Consequuntur quaerat aliquid et delectus.

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