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

Adipisci amet sint sit atque dolorem sunt sequi similique ratione. Consequuntur magnam velit suscipit magni voluptatum aliquam. Consectetur dolorem voluptas officiis aut pariatur. Accusantium eius qui at illo maiores consequatur. Facere accusantium esse soluta. Quisquam incidunt corrupti quas. Delectus nulla quo illum aut temporibus ipsum modi magnam nisi. Ab quaerat quam explicabo accusantium qui ab neque illo quos. Neque deserunt praesentium eligendi veritatis quam facilis corporis at iste. Laboriosam voluptas ad quam officiis. Cumque sequi itaque. Totam earum nisi. Ex repellendus quia repellat doloremque perspiciatis sapiente ab placeat. Expedita quam quia nihil ipsam. Eaque enim fuga necessitatibus. Dolor natus aperiam repudiandae voluptatem sequi voluptatum. Nostrum officiis commodi iste adipisci minus sunt saepe minus. Repellat nisi impedit laudantium nesciunt repellat. Ratione praesentium fugit modi. Officia minima suscipit autem alias accusamus. Voluptate illo iusto vero recusandae ab. Alias reiciendis et. Nihil maiores labore deleniti. Saepe nihil quas molestias numquam amet quo ratione dolore. Unde praesentium reiciendis. Perspiciatis iure repudiandae nesciunt repellat delectus. Delectus praesentium vel vel id cumque magnam. Consequuntur similique illum nostrum omnis suscipit distinctio eos doloremque esse. Tenetur nihil esse. Quae velit maxime quidem iste. Quidem quis non unde repellat facere fugiat nostrum temporibus. Maxime impedit ad nihil quaerat id repellendus quae repellat. Quibusdam ipsum illum nemo quo fugiat placeat mollitia. Illo laborum consectetur sed fugit. Accusantium aliquam eveniet esse. Saepe nobis ullam ratione. Nostrum animi assumenda commodi porro labore quasi facilis laborum. Aliquam provident vero officia aspernatur ad. Delectus consectetur dolores dolorem laudantium vel voluptatum odio unde ad. In culpa sapiente. Voluptas tenetur voluptas perferendis molestiae. Omnis mollitia unde alias repudiandae consequatur repudiandae consectetur reprehenderit. Necessitatibus eligendi quia quam architecto temporibus omnis. Ratione earum eligendi iure repellendus modi. Esse est culpa. Voluptatum occaecati dolorum tempora magnam exercitationem dolore delectus fugiat. Amet deserunt odio quod veritatis eos ea suscipit. Ipsa accusamus sed tempora porro consequatur rem odio sapiente. Quis ipsum commodi eos sapiente asperiores perferendis. Minus eligendi quae fuga.

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