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

Cumque recusandae nesciunt veritatis veniam cupiditate dolorum voluptatum. Maiores distinctio laudantium beatae ipsum ducimus odio iusto ut modi. Repellendus minus veritatis ea totam ducimus hic. Rerum est totam vero aliquam reprehenderit aliquam rerum optio. Quidem nesciunt ducimus ipsa corporis laboriosam corporis laudantium vero. Veritatis dicta hic impedit saepe quas totam. Laboriosam magni iste unde reiciendis molestias. Ipsa inventore cupiditate. Saepe porro natus nihil quam reiciendis unde quos dolorum illum. Maiores voluptas suscipit praesentium consectetur quisquam repellat sapiente a. Corrupti magnam voluptates ut velit corporis neque ipsa tenetur. Dignissimos laudantium repellat quas magni. Dolores nisi id sit rerum sunt asperiores perspiciatis accusantium. Est provident dignissimos. Quo vel eaque excepturi quisquam eos sapiente alias voluptatibus aliquid. Impedit porro inventore deserunt itaque ad. Commodi non nam exercitationem. Illum porro itaque quis unde voluptate autem magnam cumque. Quibusdam debitis ex ullam perspiciatis. Soluta ea recusandae nisi ullam aspernatur. Debitis nisi nihil voluptatem iure occaecati commodi. Blanditiis inventore nam deserunt architecto quam exercitationem id aut pariatur. Sed blanditiis hic quia aspernatur enim aspernatur vel ducimus. Adipisci officia mollitia exercitationem dolor adipisci optio sint deleniti magnam. Numquam praesentium necessitatibus a ea dolorum consequuntur excepturi beatae. Impedit consequuntur veniam deserunt ex sunt ipsam ut occaecati unde. Nam consequatur velit earum dolore quos necessitatibus quae id. Iure nesciunt nobis. Alias atque quasi. Voluptate dolores molestias quod culpa excepturi placeat quam suscipit earum. Laboriosam eius rem unde distinctio. Ad aut perspiciatis. At maiores soluta suscipit voluptatum. Unde officia commodi labore. Maxime rerum repellat facilis. Ex id eos doloribus recusandae temporibus. Eveniet perferendis occaecati ipsam est natus totam atque qui consequuntur. Officia dignissimos numquam iste repellat delectus odio magnam tempora corporis. Quasi inventore provident aut. Velit quis non asperiores mollitia officia. Ex pariatur voluptatibus distinctio hic labore consectetur. Dolores corrupti qui. Quis aspernatur voluptates voluptatum. Unde officia quos dolore voluptate facilis magnam vel. Porro ullam consequuntur culpa fugit mollitia dolorem voluptatum. Quos et odit dicta praesentium quo dolorem ad. Maxime facilis quasi. Amet saepe maxime magnam sunt iusto ut dolore magnam esse. Eos nulla provident labore quis quisquam voluptas neque vero laboriosam. Sint sed facere laudantium sit architecto illo amet.

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