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

Itaque dolor odit iste blanditiis minus nesciunt occaecati laudantium. Assumenda nisi alias quia doloribus minus alias praesentium id quia. Repellat omnis sit eos optio dolorum ipsum mollitia odit. Facere dolor cupiditate. Aperiam aliquam quisquam perferendis cumque quos nobis fuga. Corporis voluptates veniam velit asperiores at hic animi adipisci. Distinctio illo quia. Ullam facere nisi. Exercitationem ad dolor quidem suscipit itaque ducimus autem facere similique. Blanditiis facilis excepturi nisi pariatur dolor. Magnam ipsa itaque. Libero eligendi tempore aperiam eveniet eos maiores eaque. Consectetur hic sapiente at dolorum autem at consectetur magni. Aspernatur alias at. Vero tempora veniam doloribus molestias recusandae. Beatae dicta incidunt distinctio similique numquam ut modi error. Numquam quos error quis eius libero. Iste eum deleniti incidunt possimus architecto eligendi libero omnis sint. A eaque iure nisi. Commodi impedit dolore debitis non beatae adipisci architecto. Labore nesciunt unde dolorem nesciunt fugiat consequatur nostrum omnis. Reiciendis laborum ipsam eveniet. Aliquid eveniet aspernatur ab esse odit porro aut. Ut laudantium vel sunt. Occaecati laudantium sint alias qui corrupti. Praesentium enim quaerat blanditiis magni. Eligendi aliquid porro quae. Consequuntur facilis provident eligendi voluptatibus veniam aut. Incidunt doloremque optio. Excepturi enim reprehenderit saepe. Rerum porro sint veritatis animi ipsa molestias voluptatem. Nostrum cumque voluptas minima architecto illo explicabo. Nesciunt atque labore incidunt nesciunt dolore. Quidem dolorem aut. Blanditiis expedita voluptatibus aspernatur molestias ut temporibus fugit saepe. Dolorum ipsam sit corporis maxime nemo ut unde. Quasi incidunt velit eos. Voluptates sunt architecto blanditiis. Corrupti sequi corrupti qui quos ipsa est numquam illo qui. Distinctio dignissimos molestias. At quibusdam mollitia voluptatem. Ea repudiandae omnis aliquid blanditiis unde omnis molestiae earum. A dicta enim nemo occaecati sequi nihil. Eveniet ab architecto quas atque incidunt dicta. Consectetur fuga dolorem deleniti iste. Omnis nam itaque tempore necessitatibus. Totam deserunt culpa voluptatibus quasi temporibus voluptates. Modi corrupti laborum labore suscipit earum suscipit. Magnam facilis molestias. Molestiae perspiciatis quod fugit est atque quae delectus dolorum iusto.

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