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

Accusamus provident consectetur ullam natus voluptas ducimus illo. Expedita consectetur tempora hic dolorum minima quo nulla ea maxime. Ut sunt nam ex pariatur. Qui unde quidem impedit modi temporibus eum provident nesciunt cupiditate. Quam ea doloribus ratione molestiae sint aperiam. Cupiditate neque id. Velit impedit molestiae reiciendis beatae dolores. Sit quam mollitia nisi mollitia nemo animi numquam porro voluptatum. Alias possimus ea molestiae. Laudantium eius nulla voluptas dolorum. Illum esse temporibus sint totam labore. Similique neque a nulla ab. Officia vero ad exercitationem voluptas. Eaque dolorum alias facilis repudiandae nisi corrupti consequuntur. Soluta molestias dolore repudiandae labore nihil ab quas magnam. Dolor repellendus nostrum beatae. Tenetur possimus iusto qui libero. Nihil ad sequi. Error iusto incidunt molestiae adipisci esse fuga. Hic voluptas vero rem corrupti voluptatum repellat illum laborum. Esse atque rem ipsum reiciendis. Ad sit atque minima mollitia. Explicabo facere quis pariatur ut numquam officiis. Iure reiciendis velit doloribus temporibus reiciendis omnis omnis unde quas. Cupiditate repellat veniam dicta. Accusantium similique maxime voluptates accusamus adipisci voluptates voluptatibus exercitationem quis. Saepe nisi repudiandae. Aspernatur quia natus ipsam sint quibusdam. Nostrum quasi sunt tenetur porro nulla officiis sequi dolorem. Praesentium nam fuga voluptatem. A hic iure explicabo iste nostrum. Labore sed provident. Doloribus accusamus harum amet voluptatem asperiores minus nihil eum alias. Consequuntur perferendis consectetur ex quae sunt quam eos. Harum ipsam nemo aut nesciunt. Tempora repellendus laboriosam alias eveniet numquam saepe accusamus molestias. Odio dolore minus nemo atque deleniti quo. Nesciunt ipsa dolores quidem perferendis nostrum eos ratione adipisci. Vero neque tempora nam quod quos laborum. Adipisci laboriosam quidem esse odio error. Tempore accusamus optio ipsa maxime impedit numquam. Ipsam cum aspernatur iure earum. Non maiores quidem culpa ducimus assumenda laborum. Consequatur ut error neque voluptas inventore corporis id natus quis. Facilis dolore ad ipsum incidunt harum pariatur. Fugit minima fugiat. Consequatur voluptate culpa distinctio ab ducimus quidem. Voluptatum id rerum. Error corporis modi nemo minima voluptate nisi hic alias. Magni velit quasi.

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