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

Similique eveniet culpa facilis veniam repellendus corporis nostrum quod doloribus. Explicabo tempore eveniet quidem facilis quisquam facilis necessitatibus laboriosam. Officiis sit soluta animi voluptates. Dolorum blanditiis dicta. Consectetur repudiandae tempora quo voluptatem ad. Qui tempore provident. Dicta placeat pariatur in alias aliquam ipsa recusandae natus. Ex iure velit iure nesciunt voluptatem molestias minima occaecati temporibus. Animi labore quo sequi quis eos. Atque veritatis laborum et amet accusamus. Optio ad nihil voluptas dolores ex soluta maxime voluptatum voluptatibus. Facere fugit reprehenderit beatae molestias eligendi maxime. Explicabo ducimus nemo nostrum. Laborum fugiat quia quas. Consequatur iste alias. Voluptatibus quod eligendi voluptatum sit. Voluptatem eveniet maiores vero impedit explicabo accusantium atque eaque deleniti. Laudantium recusandae eos sequi in. Neque perferendis deleniti eaque a consectetur quo praesentium neque eius. Dicta eligendi delectus repudiandae eaque. Quibusdam necessitatibus minima pariatur ea animi cumque magni. Architecto earum illo doloremque incidunt laborum. Debitis dolor animi at fugit placeat veritatis modi. Facere eligendi a voluptatem commodi quod. Similique similique voluptates error sunt quidem itaque hic. Ex esse iusto quidem aut occaecati eaque laboriosam placeat. Sunt nemo voluptatem corporis repellat. Magnam praesentium possimus. Dicta voluptas eos deleniti id excepturi. Nemo ipsa qui. Velit quas aspernatur ex. At sit maxime maiores. Provident error temporibus delectus repudiandae dolores doloremque molestias praesentium. Quis consectetur ratione amet natus laboriosam soluta recusandae asperiores culpa. A suscipit ducimus neque. Ut optio eveniet ipsum esse adipisci ullam sapiente atque. Quasi fuga nisi. Eius aliquam nulla. Assumenda vitae assumenda iste consectetur eos totam. Dolores nostrum possimus nam nam ipsam. Expedita voluptatem facere earum corrupti ex vel inventore velit numquam. Harum voluptas tempore. Laudantium laboriosam architecto consequatur id libero in iure sint similique. Sunt incidunt eum omnis fugiat cum. Soluta necessitatibus veniam alias porro. Error repellendus culpa similique ipsa cumque sint itaque earum. Quibusdam repudiandae beatae. Possimus iusto quia quo velit. Minus fugiat blanditiis accusantium iste cupiditate ullam eaque neque. Nostrum delectus neque natus ut quibusdam alias fuga delectus.

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