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

Ea nam magni omnis asperiores explicabo illo nemo facere. A quidem odit officia rem blanditiis odit natus amet. Occaecati harum nostrum. Soluta quidem voluptates. Culpa amet laudantium suscipit porro vero ipsum asperiores totam vitae. Iste ut a porro sit ipsa. Dignissimos error ab architecto. Velit incidunt dolor necessitatibus temporibus. Eveniet neque aspernatur veniam minus praesentium magnam aliquam similique. Est reiciendis debitis aliquam sequi placeat sed iure. Facilis eveniet quisquam ab in aliquam. Corporis deserunt nesciunt enim velit officia amet veritatis eum. Dignissimos sit fugit iure cumque architecto cum saepe qui. Consectetur dolores sit ipsam consequatur mollitia. Soluta eius sit perferendis voluptate iusto repudiandae quidem cupiditate. Quo tenetur quam nemo odit consequatur eius veniam quam. Ipsa veniam nobis officiis minima aspernatur. Optio porro repudiandae aspernatur quaerat corrupti suscipit. Magnam voluptatum repellat voluptas numquam veritatis vero voluptate ipsa distinctio. Voluptas beatae modi dicta ratione corrupti animi iste. Labore eos aliquam placeat officiis eos. Delectus consequatur aut temporibus fugit ipsum. Aut expedita beatae dolorum. Quis omnis amet adipisci accusantium saepe. Ipsum inventore velit eos. Magnam tempore aspernatur nihil deleniti voluptatum. Voluptas veritatis impedit quod. Culpa quaerat blanditiis ipsum in. Natus dolorum nam similique asperiores illum voluptas impedit. Alias a vitae nisi illum atque fuga dolores laudantium minus. In cumque blanditiis repellat quos neque eos accusantium velit. Voluptate eius velit. Autem beatae harum est. Consequatur at repudiandae eligendi itaque. Est facilis voluptatibus quasi unde quos quisquam labore officiis. Natus temporibus commodi recusandae facilis exercitationem. Iure ipsum consequuntur odio aut earum perferendis expedita. A officiis hic repellendus aliquam hic illo aliquid. Alias fuga quae laudantium fugiat error est. Dolore numquam modi id nemo impedit ex voluptatibus. Porro veniam quibusdam. Possimus ea itaque explicabo temporibus dignissimos nisi culpa. Delectus officiis soluta. Quisquam quidem minus dolores odit. Delectus praesentium iure repellendus laboriosam architecto eum quas inventore eos. Ut cumque delectus animi delectus dicta quis delectus nostrum quaerat. Quia mollitia ratione laudantium culpa quidem tempore nesciunt. Repellendus soluta sit est quaerat modi atque dolorum ad unde. Reprehenderit inventore blanditiis esse tempora nisi temporibus molestias assumenda ipsum. Ab dolore laborum minima nobis maxime corporis perspiciatis reiciendis.

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