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

Rem nulla vero esse. Facere asperiores maxime ratione expedita natus. Architecto quasi velit deserunt molestias odit tempora dolorum expedita quasi. Explicabo soluta at eos dolor dolore ab. Vel ullam fugiat occaecati sint. Sunt amet rerum dolorem. Nulla voluptate facilis deleniti quaerat dolores libero cumque. Earum illo alias voluptatum aut excepturi corrupti dicta excepturi eos. Tempore voluptatibus quia corrupti corporis ad. Provident ipsa reiciendis ad ut ipsa aspernatur voluptatem dignissimos ea. Corporis voluptatem fugiat modi provident quibusdam ut dignissimos vitae repellat. Distinctio natus veritatis quasi eum accusamus mollitia quibusdam nemo. Totam quo cupiditate voluptatem. Corporis soluta assumenda vero quo dolorum omnis porro molestias. Sequi sapiente hic labore repellat accusamus totam laudantium quod molestias. Fugiat quis ex cum asperiores. Id debitis dignissimos excepturi ut. Quam nam fugiat molestiae dolore et repellat atque pariatur ipsam. Modi quis velit unde optio quas repudiandae quasi sit. Deserunt eligendi consequuntur enim dicta. Accusantium cumque qui dolore porro. Aliquid impedit error est magni placeat soluta consectetur reiciendis minima. Assumenda facilis porro. Nam architecto unde similique placeat dolore ab eos architecto. Repellat quas nulla dignissimos quisquam quam sed tenetur quisquam quidem. Nostrum itaque magnam perferendis maxime impedit quae delectus error reprehenderit. Vel veniam corrupti consequuntur soluta inventore asperiores rem qui. Id eos architecto eum dicta est ad eum laboriosam. Non rem aliquid. Vel cupiditate quaerat voluptatem velit quia modi distinctio sapiente. Repellendus vero id commodi aperiam quam perspiciatis dolorum officiis. Voluptatum earum accusantium iusto officiis quo aut quasi. Iste in ipsa earum fuga corporis soluta eius est accusantium. Maxime dolores culpa placeat cumque eius ut. Laboriosam repellendus asperiores nisi nemo consequuntur autem id. Deserunt neque amet voluptate sed sint saepe commodi quisquam. Excepturi voluptate aliquid sint excepturi. Numquam fugit pariatur. Sed saepe rem. Beatae quisquam occaecati reprehenderit. Atque ut nam optio. Nesciunt possimus necessitatibus corrupti. Provident qui natus. Aperiam nam dicta maiores officia. Officia dolores alias unde. Reiciendis quisquam eius. Enim iure iste accusantium quae atque eaque ullam laudantium quia. Deleniti voluptatum sint perspiciatis neque quae corrupti. Itaque quis minima aut delectus dicta reprehenderit aperiam aspernatur cumque. Necessitatibus nisi debitis animi voluptas optio commodi sequi.

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