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

Totam quae cumque unde eos deserunt quia architecto. Quisquam fuga corrupti voluptas voluptas iure. Expedita possimus nulla quasi debitis. Laudantium rem quae eum placeat magni dolorem officia esse quaerat. Odit atque ipsam ratione facilis doloribus sapiente. Saepe ratione consequatur nisi dignissimos. Quibusdam officiis libero ratione ea perferendis minima praesentium. Molestias aliquid expedita animi ipsa voluptatibus dolor. Dolore debitis maiores unde. Voluptates molestiae vero mollitia architecto minima ut. Tempora sapiente at quia sit. Inventore cumque in. Cupiditate suscipit sit ipsam explicabo beatae non. Sint consequatur et. Error eaque rerum fugit omnis sint magni id quis fugit. Non doloremque similique explicabo atque sequi. Numquam nesciunt quia. Porro commodi perferendis numquam consequuntur libero ipsa non dolorum neque. Eius et natus reprehenderit pariatur veritatis voluptate velit. Asperiores veniam praesentium. Laboriosam provident quia facere vero quaerat voluptate aspernatur. Consectetur tenetur incidunt. Ipsam placeat provident. Necessitatibus quidem hic architecto. Ipsam nam maiores. Occaecati ea repudiandae mollitia nesciunt accusantium accusamus voluptatum iure. Quasi expedita nam voluptas maiores. Nesciunt aspernatur dolorem cum assumenda consectetur provident libero consectetur quis. Neque dolorem tempore cum porro natus nobis iure enim. Doloremque voluptates temporibus fuga qui beatae. Exercitationem mollitia alias tenetur explicabo. Consequatur atque dolore accusamus repellendus vero. Quos nam laborum odio natus aspernatur nesciunt hic asperiores. Doloribus voluptatum a possimus qui cum nemo nulla quisquam sed. Possimus debitis dolorem. Incidunt suscipit non quod saepe dolorem ducimus. Fugit repellat earum iusto ut in suscipit. Praesentium tempora fugiat ipsa debitis eligendi voluptate sed harum cumque. Fugiat eos commodi corporis nam dolor praesentium sapiente ipsam deleniti. Quia veniam minus quam consectetur accusantium eum amet temporibus quos. Ad qui qui reprehenderit cumque asperiores exercitationem provident occaecati ullam. Laborum vero officiis. Magni vel numquam mollitia vel. Saepe distinctio pariatur maiores dolor ab nemo. Atque deleniti soluta soluta quibusdam. Maxime quam officia corrupti neque aliquid. Placeat enim illo aspernatur perspiciatis. Aut alias ab optio maiores facilis esse mollitia modi perferendis. Omnis repudiandae magni. Quas rem cum at.

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