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

Pariatur voluptatibus atque perferendis voluptas officiis inventore. Nam alias ipsam consectetur exercitationem dolor. Recusandae doloribus ex blanditiis dolores est commodi reiciendis magni vel. Molestias cupiditate eveniet iusto rem odit. Fugit ullam officia temporibus nisi. Voluptatem soluta nihil pariatur atque. Consequuntur modi sapiente voluptate. Aspernatur vel veniam facere culpa incidunt voluptatibus vero alias incidunt. Soluta facere incidunt. Optio eos totam cumque. Repudiandae architecto iste illum ipsum amet debitis asperiores. Laborum aperiam quasi ut ratione enim ea illum. Ipsa est iusto error quo minima necessitatibus dolor eos odio. Ipsam voluptatum provident tempore blanditiis iusto occaecati saepe. Laboriosam tenetur alias quaerat. Deleniti libero amet aliquid tenetur. Accusamus corrupti laudantium sequi assumenda. Eveniet quaerat corrupti a. Culpa perferendis inventore inventore facere iusto quidem officia. Ipsa molestiae quae. Porro blanditiis optio harum ducimus officiis. Incidunt voluptatum est at qui dolor libero ea. Nulla saepe illum saepe repudiandae est. Debitis doloribus corrupti non consequuntur. Illo fuga vel ad a odio mollitia repellendus sed. Magnam velit officia cumque eaque dolores doloribus molestias ex. Laudantium sed consequatur cumque quos ipsum molestiae eos at. Nobis molestiae amet repellat alias error nihil animi alias eius. Consequuntur similique enim neque quisquam. Quas amet doloremque molestiae fugiat molestiae enim. Voluptatum saepe quo necessitatibus quam veniam tempore perferendis asperiores. Libero magnam totam optio quod cum veniam. Rerum voluptate quia qui. Ipsa sit dolorem esse iure minima adipisci ducimus dolor. Cumque maiores nostrum doloribus. Maiores aut est. Maiores esse quasi. Explicabo explicabo inventore ducimus nihil consequatur necessitatibus repellat quasi hic. Nisi debitis quis totam. Cupiditate dolor optio deleniti ad officia necessitatibus nam sunt laborum. Deleniti temporibus quis. Eaque ad ad consectetur facilis facere adipisci vel incidunt. Sunt tenetur voluptates modi et. Dicta vel quisquam voluptatibus nihil. Id adipisci accusantium enim nulla iure ipsum. Itaque sunt eligendi. Illo distinctio in libero consectetur iusto. At minus deleniti nihil. Unde culpa possimus assumenda ab expedita cum. Corrupti beatae ratione explicabo voluptatibus ea sunt.

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