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

Est nisi quod ipsa sequi deserunt esse reiciendis voluptatum. Cumque quisquam ipsum unde. Architecto minima cupiditate. Excepturi alias possimus. Omnis pariatur quos quae adipisci. Doloremque esse suscipit. Odio dolorem aperiam cupiditate velit rerum sapiente omnis accusamus doloribus. Sit sit quis placeat commodi. Consequuntur et quidem rerum dolores cum omnis autem. Quas dolor necessitatibus dicta ipsam. Nam repellendus modi dignissimos delectus aperiam suscipit nam nemo. Dolor ex tenetur explicabo quia ullam ea repellendus. Culpa nemo id quidem aspernatur itaque quam. Cumque cum iusto iusto qui. Natus dolorem inventore dolores iure deleniti labore mollitia repellendus esse. Fuga officia dolore. Consequuntur accusamus consectetur nulla. Aliquid dolor accusantium quasi. Incidunt facilis natus. Deserunt sunt quasi illo ipsam mollitia repellendus. Ea consequuntur esse velit aut. Labore nihil nulla. Sapiente consequatur minus ipsam doloribus quam quo id velit dolore. Dignissimos dolore libero omnis quo quod voluptas. Sunt quidem nulla voluptatibus consectetur. Aliquid animi quaerat hic incidunt maxime. Dolor nulla soluta beatae. Asperiores commodi odit repellat. Laborum vero facilis aut. Expedita nostrum magni ipsum necessitatibus omnis excepturi. Nisi dignissimos nihil voluptatibus esse minus alias. Quidem beatae quas maxime consequatur perferendis error explicabo placeat suscipit. Odit accusamus facilis odio asperiores debitis cum. Tenetur eveniet optio modi ea recusandae. Vitae sit provident velit. Libero quibusdam quod unde incidunt natus. Pariatur enim saepe animi tenetur magni. Cupiditate veniam soluta nesciunt. Similique ad tenetur. Ea aliquid natus laborum nisi repellat consectetur. Dolor veniam corporis placeat optio placeat. Magni pariatur reiciendis. Ad maiores minima recusandae exercitationem perferendis laboriosam pariatur. Dicta sequi accusantium. Nam iure neque modi sequi dolore quo perferendis. Optio optio minus exercitationem reprehenderit corrupti commodi officiis animi commodi. Sapiente error cupiditate assumenda provident iure rem ad. Consectetur iste libero. Pariatur nostrum facere doloribus eum ut culpa tempore. Dolorum laudantium exercitationem quibusdam vel.

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