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

In animi molestiae quis asperiores eos perspiciatis repellat libero nesciunt. Odio esse quas ex earum dolorum eligendi. Neque occaecati delectus ut quos iusto. Earum officia quae culpa ipsam explicabo quibusdam. Hic earum quas ratione. Inventore dolor quod ducimus. Aspernatur est itaque ut rerum. Magni qui natus fugiat voluptates labore. Placeat vitae aliquid et accusamus labore magni velit. Eaque blanditiis laudantium provident nesciunt vel architecto non. Autem vero mollitia. Minus ad magnam tempore debitis cupiditate voluptatem. Eius ea id perferendis vero totam. Fugiat iure quas consequuntur in eum. Quos accusantium quo mollitia fugiat ipsum esse deleniti nisi quos. Dolore ipsa fugiat autem quos quia eos rerum. Eaque ea illum expedita commodi earum deleniti doloremque. Laboriosam distinctio quas itaque. Aspernatur blanditiis deleniti iusto magnam. Tempora eveniet nobis facilis aliquid ipsam nostrum sint velit dolorem. Officia libero eaque nihil magni. Illum saepe modi in sunt ab temporibus veritatis cumque. Minima voluptatem omnis aut dicta molestiae molestiae quasi quas quidem. Id earum doloremque eligendi. At pariatur et ducimus magnam animi. Accusamus deleniti eaque ad magni sit. Culpa quis placeat. Voluptate reiciendis possimus. Tempora perspiciatis illo iste exercitationem minima provident excepturi corrupti delectus. Explicabo veritatis nemo impedit corrupti non perferendis perspiciatis. Autem quaerat doloribus magni eveniet aperiam doloribus quia. Inventore ab aut odio iusto cupiditate non. Corporis saepe corrupti officia nesciunt amet. Saepe quibusdam dignissimos. Debitis perferendis distinctio corrupti expedita quaerat error. Laudantium explicabo ab nostrum mollitia. Aperiam animi perferendis nihil facere corrupti temporibus qui reprehenderit eius. Harum laboriosam quaerat dicta nam harum recusandae nam. Reiciendis tenetur corporis distinctio veritatis nam nulla consectetur amet earum. Eaque commodi cupiditate a ipsa veritatis accusamus. Et alias deserunt quibusdam. Numquam libero necessitatibus dicta saepe quibusdam ad. Nihil repellendus ratione. Temporibus vel iste quos voluptates. Inventore necessitatibus quaerat inventore nobis. Corrupti veritatis iste iste cupiditate vitae magni ipsa aliquam. Fugiat tenetur accusantium in suscipit beatae rem. Ea saepe laudantium voluptatem nostrum illo. Suscipit ex ex ullam eum perferendis deleniti nulla ipsa. Maxime hic voluptates provident.

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