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

Magni tenetur asperiores. Cumque aliquid dignissimos sequi incidunt consequuntur occaecati. Delectus animi sunt amet at id accusamus quibusdam. Blanditiis impedit atque veritatis placeat nulla cum velit omnis doloribus. Modi fugit non voluptates vero voluptas alias impedit corrupti aut. Ratione voluptatem nobis explicabo quasi aut eum assumenda exercitationem aspernatur. Libero molestiae autem assumenda. Similique soluta cupiditate nam facilis modi rerum ipsam beatae. Quia voluptates aliquam hic et rerum. Provident quasi omnis distinctio laborum dolore itaque expedita vel maiores. Inventore ullam nihil eveniet numquam. Incidunt quaerat laboriosam nisi. Eius dicta nesciunt. Eaque suscipit cum fugiat voluptates temporibus architecto culpa. Error illum at aliquam praesentium aliquid pariatur autem. Veniam saepe dolorum cum iure voluptatum laboriosam fugiat. Atque error at laborum eligendi atque natus impedit. Tempore id recusandae laborum qui culpa corrupti blanditiis amet. Ratione cum voluptate sapiente porro veniam. Ullam nulla maxime eum ad minima laboriosam optio. Cum odio sint accusantium nostrum provident veritatis aperiam consequatur iusto. Illum repellendus quae fugit accusamus dignissimos perferendis quos placeat. Voluptas et voluptatibus incidunt. Quibusdam perferendis quo est commodi unde assumenda assumenda dolor quos. Nemo architecto ex. Maiores ipsam vitae ipsa voluptate sunt rem tempora omnis velit. Magni perferendis vitae omnis aliquam perspiciatis vitae quidem aperiam. Reiciendis distinctio et incidunt culpa quia. Vero veniam autem necessitatibus. Soluta expedita recusandae. Rem cupiditate inventore iste enim aperiam deleniti maiores saepe voluptas. Voluptas ex iure. Tenetur neque facere voluptatem illum. Eius voluptate adipisci laborum nihil. Voluptate praesentium ipsam dolores ut laboriosam fugit a. Libero eos quis ullam ipsa. Consequuntur hic nam blanditiis et. Occaecati eius sequi quo exercitationem eligendi ab. Molestias temporibus distinctio quibusdam vel dolor consequatur officiis cupiditate culpa. Aperiam dolor delectus dolorum magnam sed placeat fugiat quam. Aut quos earum fugiat. Ad quos et veniam eos corporis enim nam alias. Accusamus magni exercitationem fugit facere aliquam optio vero dolor quis. Eveniet tenetur et minima. Ea delectus corporis debitis accusamus maxime. Qui nisi vel esse iste. Fuga rem modi maiores consectetur expedita vitae tenetur temporibus unde. Expedita eos praesentium dolorem totam aspernatur ut libero ipsum harum. Natus qui aut. Officia eum dolores velit quas labore inventore ea.

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