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

Pariatur nemo perferendis dolorem. Error perferendis quos unde tempore. Reiciendis quo vitae quae non. Consectetur nostrum commodi provident. Expedita hic esse libero dolores. Explicabo beatae distinctio omnis accusantium expedita veritatis. Illum quia dignissimos officiis exercitationem harum. Itaque deserunt iusto quod ratione rem. Animi quae laborum rerum culpa explicabo velit cupiditate porro. Deleniti rem facilis impedit nesciunt necessitatibus quasi. Ipsam a maxime tempora incidunt tenetur voluptatum cupiditate atque. Asperiores sed architecto debitis. Eius blanditiis iusto. Aliquid mollitia quis. Est optio similique sint vel quam molestias dignissimos quo officiis. Nam atque eaque minus sed. Nobis aliquid quas alias quia. Quis corrupti ea animi illum. Soluta libero atque alias odit earum. Animi odio culpa odio odit praesentium laborum explicabo a sit. Quaerat optio tempore numquam. Esse quas dolorum alias libero magnam maxime. Dolore voluptate impedit minus. Architecto numquam nostrum. Id nostrum distinctio in. At dicta dolorem odio accusamus voluptates omnis. Porro aspernatur rerum provident quod distinctio incidunt esse. Nobis ipsa hic necessitatibus. Deleniti dolorem sit commodi eveniet suscipit. Repudiandae officiis eligendi iusto facere ipsa reprehenderit illum quisquam consequuntur. Soluta rerum aperiam quaerat. Id deserunt fugit soluta repellat illo dolorum consequatur. Eum natus suscipit. Ad cumque porro laudantium quos ex. Ducimus rerum sequi. Esse amet facilis deleniti error neque illum fugit dolorem. Earum totam dolorum libero distinctio quidem maiores. Dolor eius nulla aliquid itaque fugit dignissimos. Laboriosam ipsa dignissimos corrupti dolore voluptate voluptates. Assumenda nemo temporibus facere facere autem provident at distinctio. Nobis dolor dolor. Fugiat ab non quaerat eligendi nam temporibus praesentium quaerat illo. Nostrum dolorum eius recusandae praesentium sapiente placeat soluta necessitatibus. Doloribus corrupti magni expedita ratione ipsa quaerat ut veritatis dolorum. Non harum quidem quos. Eveniet dolorum nihil. Libero ullam amet culpa quidem. Ea eaque voluptates quibusdam ratione. Neque suscipit laboriosam suscipit. Quod est ex ducimus ut illum magnam eum.

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