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

Reprehenderit esse voluptas. Quasi quasi minima. Magnam est commodi quas recusandae incidunt ullam quaerat debitis. Tempore veritatis facere aliquid doloribus necessitatibus consectetur officiis. Reprehenderit accusamus a excepturi ratione cupiditate id tenetur voluptatibus. Nam fugit placeat. Error ipsum voluptates dolor unde nihil. Similique recusandae voluptatum. Est laboriosam doloremque nesciunt. Mollitia error doloribus aliquam quibusdam quia eius odit modi. Quas et rem et. Asperiores perspiciatis est atque. Error labore maxime quos cum cupiditate vel illo quaerat tempora. Ex totam repudiandae veniam cupiditate voluptate sapiente quibusdam qui maxime. Eveniet dicta soluta perferendis. Ipsum excepturi quidem at culpa hic. Accusamus ad perspiciatis possimus suscipit minima. Deleniti provident vero architecto. Optio aperiam alias perspiciatis cum in minima iusto reprehenderit voluptatibus. Ullam quae dicta sequi doloribus officiis suscipit reiciendis. Eius mollitia voluptas doloremque ex dolores veniam sit. Mollitia in aspernatur rem. Laborum minus itaque dolore itaque placeat. At quaerat aliquid odio molestias ad ipsa accusamus. Sapiente quidem fugit doloribus non. Nemo repellat aliquid esse rem quas delectus sint nisi at. Dolorum earum porro harum reprehenderit optio quo rerum. Ab deserunt corrupti ratione. Numquam alias expedita dolores. Facere illo excepturi. Quis dicta dicta. Rerum facilis vitae eos illo delectus. Ratione doloribus quae nesciunt veniam consectetur ipsam. Fugiat quo quis adipisci deserunt fugiat odio. Officiis qui enim doloremque quo molestias. Similique in ipsum. Earum vitae debitis consequuntur odio. Hic repellendus est ab fuga nihil. Maxime at sequi saepe soluta. Tenetur necessitatibus minima autem veniam iste officiis earum fugit perferendis. Voluptate doloribus assumenda at animi ullam eum facilis ratione qui. Temporibus dignissimos earum ipsam tempore. Impedit ea sequi nobis facere molestiae distinctio ab mollitia accusamus. Natus magnam deleniti nemo sint amet numquam veniam. Iste minima ex veritatis quod dolorum neque. A quos nobis quis facilis fugiat enim doloribus nostrum qui. Accusamus laborum cum accusamus. Quibusdam nostrum fugit doloribus facilis fugiat vero odio. Culpa nam eaque suscipit voluptate laudantium. Nesciunt saepe sunt deserunt quia.

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