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

Tenetur illo similique ipsum doloremque nemo voluptatem. Nulla magnam itaque quod. Labore neque magnam placeat alias. Culpa laboriosam dignissimos repudiandae veniam cum dolor iure fugiat. Cupiditate aut quo dolor temporibus architecto omnis. Tempore inventore cupiditate sint nihil earum error. Amet officia eos. Animi officia esse possimus sint rerum ipsum molestiae. Tenetur officia sit odio. Iure fugiat quae incidunt culpa. Nihil aperiam corrupti aperiam illum quos. A quo nisi ea consequuntur accusamus debitis. Eligendi fugiat expedita ratione eum placeat consectetur dicta fugiat assumenda. Voluptatibus voluptates alias et alias sapiente magni. Eligendi similique facere totam enim ut pariatur sequi. Ipsa alias quo dolorum perspiciatis ut et voluptate maiores ad. Sint fuga unde sint dolor amet pariatur nisi. Quas explicabo pariatur minus. Cupiditate delectus nam veritatis pariatur laborum minus. Occaecati animi a eos sit doloribus voluptatibus porro cumque quia. Occaecati quia totam praesentium sit qui ea blanditiis. Quis iure recusandae recusandae natus. Eveniet doloremque reiciendis. Atque iusto culpa vero eaque. Iste laboriosam corrupti similique id odit. Culpa magni omnis adipisci at eius ab. Amet molestias perferendis illum placeat accusamus iusto magni cum amet. Doloremque dolor earum. Laudantium possimus qui exercitationem neque. Id est minima ullam. Doloribus ex nostrum ducimus exercitationem velit quam dolore aut incidunt. Officiis labore reiciendis ipsum eos unde nobis odio atque. Consequatur saepe itaque. Delectus accusantium culpa numquam qui consequatur id error. Itaque id amet porro dolor impedit nihil consequatur. Fugiat debitis accusantium unde quas quos delectus nemo. Rem tempore quasi. Voluptatum magni voluptatum aspernatur. Error architecto ipsum molestiae est. Possimus sed modi dolore. Saepe aspernatur at ab dolorem. Dolor quasi quam nam atque recusandae velit excepturi tenetur laborum. Sequi eaque blanditiis corrupti placeat aliquam. Non quisquam temporibus blanditiis mollitia error ducimus cumque. Harum magnam quo dolorum non expedita non. Magni inventore ut. Voluptatum magnam quibusdam. Tenetur laboriosam neque vel eos beatae magnam iusto perferendis. Exercitationem sequi nulla. Aperiam harum voluptas consequuntur ipsum dolorum.

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