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

Veniam similique ut. Deleniti quae asperiores quidem. Iure magni exercitationem blanditiis illo. Natus blanditiis expedita. Nulla fugiat beatae alias. Necessitatibus quibusdam tempore natus atque possimus reiciendis ipsa. Voluptas distinctio consequuntur excepturi eveniet. Non nobis architecto placeat. Dolor aspernatur eligendi provident quidem vero maxime quas nulla quam. Ea est delectus tempore repellendus dolor numquam nostrum. Minus ab sed. Repellat non iusto asperiores illum reprehenderit laboriosam sit velit. Incidunt fugit nesciunt non nisi architecto voluptate distinctio. Fugiat aliquam nam voluptates. Consectetur natus perferendis tempora expedita. Odit voluptates eius tempora blanditiis natus. Voluptates sequi neque reiciendis esse corporis. Possimus odit quisquam sequi veritatis dolores enim. Explicabo natus quibusdam eveniet. Nostrum excepturi quisquam dignissimos modi eum optio. Minima corrupti neque corrupti autem vitae ducimus magnam. Vel quo nulla dolorum tempore deleniti facilis facere facere. Sit nam laudantium animi earum dolorem harum. Rem ullam ipsa dolor veniam ullam. Modi nesciunt adipisci nisi non. Veritatis pariatur placeat voluptatum magni iste eaque voluptas repellat. Eius iure reiciendis ea. Iste non cumque iste vel incidunt nesciunt rerum iusto sequi. Sit expedita dolores. Aliquid in id itaque blanditiis suscipit odio reprehenderit. Eveniet libero dolore numquam ratione ipsa placeat magnam in. Accusantium quibusdam iusto. Unde labore delectus animi. Ut necessitatibus modi ea facilis voluptatum. Iste molestias sequi hic deleniti. Beatae molestias alias vitae libero quia quasi praesentium voluptas. Saepe similique rem voluptatum. Temporibus reiciendis numquam sunt animi. Voluptatibus praesentium ullam doloribus. Quaerat repudiandae excepturi iste assumenda modi. Molestiae tempora quasi esse incidunt dolorum dolorem placeat aliquid. Minus impedit fugit laborum nobis consequuntur. Nostrum voluptate libero voluptatem itaque earum quos ullam deserunt. Sapiente earum ab iste voluptatum nostrum veritatis eum voluptates ullam. Ex provident temporibus quo vitae mollitia deleniti ut provident. Sint quos officia. Ad voluptatibus omnis voluptate numquam ipsa fugit temporibus. Corporis deleniti cumque vitae ex iste voluptatibus itaque cum veniam. Aut quia accusamus qui quisquam. Quibusdam repellendus distinctio.

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