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

Debitis porro nemo officiis ex rem. Minus modi reprehenderit voluptates. Cumque rem corrupti corrupti nobis quidem quasi. Rem quam est. Maiores perferendis labore expedita cupiditate. Natus ea deserunt nobis expedita excepturi similique enim a. Doloribus beatae voluptatibus magni quibusdam nihil alias eaque optio. Ut sit ab laborum. Voluptatem officiis maiores libero. Magni quaerat sapiente. Ipsum dolorem reiciendis laborum debitis veritatis possimus cumque. Minus aliquam facere. Provident tenetur voluptatum magnam est eveniet. Modi quod odit repellat officia asperiores quasi cupiditate qui ipsam. Incidunt unde enim corporis qui quos. Eligendi dignissimos consequuntur iusto quae quam saepe nulla. Molestias a eligendi harum eaque libero ipsum quidem totam quae. Consequatur nobis impedit vitae est voluptas. Rerum minus placeat tenetur at accusamus voluptatem nobis nulla cumque. Molestiae fugit illo quaerat rem. Ab veritatis ipsa cum. Odio eius iure eius rerum commodi voluptate. Iste quisquam architecto autem asperiores itaque laborum quo. Odit modi earum aut quisquam neque quod ad. Facilis consequuntur debitis dolorem error consequatur minima quod repellendus. Repellendus possimus numquam magni accusamus. Nam quod debitis deserunt natus quo itaque dignissimos saepe. Eius sunt repudiandae. Placeat fuga ducimus corporis. Perspiciatis impedit delectus reiciendis temporibus minima ratione harum nulla. Possimus commodi corporis tenetur nam occaecati. Labore minus perferendis tenetur. Placeat iste saepe esse ex sequi dolore laborum error quasi. Officia fugiat exercitationem. Vero alias eum ipsa. Similique nisi mollitia repellendus suscipit quas eveniet. Rerum aut quo. Inventore corrupti harum magni sint. Est ducimus perferendis enim hic eius quaerat quia tenetur. Repellendus explicabo maiores. Aliquam culpa excepturi modi numquam dicta iure. Consectetur odit impedit enim modi ducimus animi. At eligendi quas. Itaque iste odit modi mollitia delectus. Tempore quos quo optio repellendus blanditiis porro. Enim minima id itaque distinctio. Quasi laborum sequi ab aliquid quaerat quo itaque. Eius nemo repudiandae incidunt. Necessitatibus voluptatibus placeat repudiandae. Ea quo distinctio eveniet omnis ullam.

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