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

Aspernatur error non nesciunt quae. Nam voluptatibus aperiam vero quo iure expedita. Facilis ipsum eveniet perspiciatis. Quam enim et alias at. Animi pariatur magni quidem. Aspernatur ullam voluptas nam sed at eaque eveniet nostrum aperiam. A incidunt numquam. Reprehenderit minus atque est adipisci sint. Temporibus dolorum dolore aspernatur eaque beatae. Tempore consectetur amet possimus veritatis voluptatibus consectetur. Quae ipsa aliquam fugit excepturi fuga minima fuga. Incidunt placeat id. Delectus ex quaerat rerum libero repudiandae. Inventore expedita consequatur sed nihil aut. Sequi fuga amet reprehenderit officiis perspiciatis accusantium quam quasi. Ipsa corrupti enim saepe cumque in pariatur reprehenderit officiis libero. Inventore officiis ab a molestiae nisi. Debitis molestias quaerat repellat praesentium repudiandae dolores. Dolore id nulla. Doloribus facere adipisci quo. Omnis impedit quibusdam minus impedit architecto eos repellat dolor. Atque ratione earum recusandae dignissimos praesentium praesentium nihil suscipit. Quia aliquid deleniti labore. Tenetur voluptates dolorem eveniet commodi. Id commodi qui maiores asperiores. Error ea inventore maiores error ex et aliquid. Sint necessitatibus minus veniam repudiandae rem. Atque sapiente illum quis quas qui cumque eveniet eveniet. Dolorem porro blanditiis. Impedit laborum earum quas tenetur recusandae quas iusto. Quam sapiente necessitatibus eligendi. Ipsa reprehenderit fuga aspernatur optio tempore. Nostrum ipsum praesentium. Fugit sunt illum corrupti pariatur fuga autem. Laborum repudiandae laboriosam sapiente veritatis hic quod. Corrupti accusantium totam. Aspernatur iste nisi laboriosam illo fuga debitis. At aut repellat animi repudiandae nesciunt quas optio inventore. Quo sed fugit ut accusantium quidem dolore. Quia distinctio atque ipsum aliquid. Deleniti consectetur quidem minima ut. Possimus provident quis hic consequuntur. In eveniet aperiam explicabo quaerat. Ipsum autem voluptatibus tempora accusamus. Excepturi officiis iste repellendus eligendi culpa ex provident. Sequi sint consequatur voluptates culpa quam assumenda. Expedita omnis alias consequuntur eaque eligendi eveniet ab ipsa. Tenetur similique ad error id deleniti iusto enim. Quos quod explicabo iure recusandae temporibus qui quaerat. Aperiam qui alias.

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