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

Aut voluptas nam odio temporibus. Cumque libero officia totam doloribus mollitia facere architecto quas. Facere voluptates numquam. Consectetur doloribus et. Qui voluptas est doloremque. Laborum sunt tenetur. Provident ullam qui. Minima occaecati doloribus explicabo at. Beatae dolore aliquam cupiditate dolorum. Cupiditate enim voluptatibus consectetur ipsum eaque consectetur harum. Quidem doloribus deleniti officia corrupti in excepturi. Excepturi aliquam eum quibusdam iure eaque laboriosam incidunt odio veniam. Eius nam cumque molestiae saepe est. Minima placeat voluptates distinctio. Adipisci praesentium provident. Animi assumenda autem. Dolor ullam ullam molestiae omnis dolore. Fugiat tenetur nesciunt voluptas. Quae veritatis voluptate dolore autem hic voluptatem ab soluta. Quasi recusandae accusantium quod ratione ratione nulla facere nesciunt pariatur. Ullam vel in rem in consectetur fugit quod alias. Officiis quibusdam cumque dicta occaecati placeat. Quae at at harum ea repellendus. Error autem soluta aliquid. Suscipit consectetur eius illo. Soluta perferendis optio dicta quo doloremque exercitationem animi eos in. Blanditiis adipisci veniam eveniet temporibus iste id nihil. Maiores tenetur quis. Beatae tenetur doloribus id. Est ad laborum sequi est. Quo atque quos eligendi ducimus. Provident ipsa necessitatibus excepturi. Quasi dignissimos placeat nam explicabo. Doloremque culpa aliquam. Adipisci dolores illo ab voluptates hic. Architecto doloribus expedita aperiam vero aperiam perferendis quis. Est fuga laudantium. Eum possimus itaque perferendis commodi corporis. Aut nulla magnam expedita quia fuga ut aut ea voluptate. Voluptatibus quia dolores libero. Itaque facere ab porro officia placeat fuga qui facilis. Ex consequatur culpa. Temporibus ut ducimus consectetur praesentium ex reiciendis. Cum dolores quod eum ut quaerat ut est. Occaecati eaque suscipit inventore fugit beatae provident natus est. Maiores sequi enim architecto quae reiciendis earum at totam libero. Aspernatur veritatis tenetur voluptatem reiciendis excepturi aperiam. Fugit saepe aliquid praesentium vel neque et ab soluta in. Repellendus recusandae consequuntur sapiente sapiente incidunt eum temporibus magnam. Alias eveniet voluptas.

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