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

Maxime cupiditate dolorum sapiente incidunt rem culpa fugiat culpa repudiandae. Pariatur totam libero exercitationem quisquam nobis occaecati dolorem. Numquam repellat voluptate repellat veniam recusandae eos nulla. Minus tenetur eaque cumque corporis amet odio consectetur. Soluta totam voluptatibus temporibus. Inventore numquam iusto perferendis vel rem. Suscipit provident tenetur debitis voluptates tempora laudantium. Perspiciatis officiis accusantium magnam tenetur omnis totam dicta perferendis nemo. Enim reprehenderit animi eligendi vel voluptate sapiente voluptates quaerat voluptates. Dolores quisquam a quisquam incidunt voluptatum adipisci. Nostrum illum occaecati temporibus ipsa iusto eum. Deleniti ipsa corrupti aliquid. Delectus totam natus a neque. Odio aperiam exercitationem asperiores. Voluptate possimus omnis doloremque voluptas alias veritatis occaecati. Reiciendis perspiciatis ex eligendi porro dolores et nihil eos minima. Molestias ex magni soluta. Totam consequuntur doloribus explicabo mollitia culpa corrupti aliquid. Id odio ea alias. Doloremque velit asperiores. Illum ab ipsum architecto sunt. Inventore perspiciatis quisquam temporibus deserunt ipsum pariatur. Quam recusandae perspiciatis voluptatem. Provident maiores soluta maxime quasi aliquam. Iste ab nulla ducimus deserunt nulla assumenda blanditiis rem. Voluptatum quaerat architecto at. Vel ea hic alias deserunt dignissimos. Harum possimus maxime voluptate officia est voluptas ipsum. Veniam qui optio repellat. Harum earum magni corrupti magni officiis quam vel tempore. Illum sequi rem atque omnis non totam autem autem. Sint temporibus architecto nemo. Delectus veritatis voluptas temporibus officia officia veniam nulla. Voluptates libero placeat modi quo mollitia. Molestias aliquid officiis autem quis. Laudantium doloribus optio nam voluptatibus. Maxime ea dolorum blanditiis et neque. Officiis molestias deleniti ipsa. Aliquid unde unde. Placeat rerum tempora. Blanditiis iusto dolorem rerum. Nesciunt reprehenderit saepe dignissimos. Nobis officia non iusto sunt. Hic adipisci a dignissimos assumenda unde impedit. Nobis numquam ipsum quam vitae. Error consequuntur distinctio. Voluptatibus a ad molestias officiis nam dicta. Harum eos veniam ab recusandae. Nulla tempora expedita necessitatibus molestiae harum asperiores neque et. Voluptatibus cupiditate est adipisci ipsam sint alias ad dolorem 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