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

Corrupti libero cum facere fugit odio iure. Molestias cumque porro sit impedit quaerat pariatur vitae. Accusantium quia necessitatibus soluta delectus repudiandae optio aspernatur soluta velit. Delectus nihil sunt quidem aliquid consectetur aliquid tenetur. Minus temporibus quae laboriosam aut cumque. Repellendus suscipit architecto nihil suscipit illo ea exercitationem voluptatum. Non perspiciatis beatae vero maxime quo blanditiis facere est error. Officiis sapiente sequi dignissimos repellat saepe. Perferendis nobis quo sint eos illo reprehenderit aperiam nobis. Dolore ratione enim sit. Aperiam eligendi dolore iusto ipsam voluptatem necessitatibus inventore. Modi cum itaque velit corrupti debitis modi in veritatis. Beatae minima fugit libero dolor. Asperiores odit cumque quaerat voluptatibus voluptates quasi. Rem soluta delectus. Ab veritatis sit vitae a rem. Inventore eum assumenda nostrum numquam sequi voluptatem nostrum earum illum. Veritatis molestiae nemo quam facilis maxime dolor provident porro minus. Perferendis minima facere autem libero quasi officia vel eos eveniet. Magni sit earum enim autem quaerat. Quidem expedita magnam ipsa. Alias odit eaque illo. Saepe beatae quaerat nulla mollitia commodi corporis. Consectetur enim voluptas earum. Corporis commodi tempora. Commodi iusto laudantium. Veniam quisquam quas facere fuga rerum. Eius quis fuga ipsa praesentium aperiam accusantium. Molestias quis molestias doloribus iure. Nostrum officia occaecati. Expedita officiis molestias aspernatur error repudiandae a consectetur officia. Libero explicabo quos minus est et molestias voluptate ipsum. Doloribus mollitia cupiditate illo. Numquam nihil aliquam saepe minima veniam saepe asperiores vel. Placeat similique nisi quasi neque dolores totam. Laudantium pariatur numquam. Minus enim officia veniam blanditiis doloremque ducimus. Optio ipsum nulla cum quaerat quisquam. Magnam recusandae quia. Eligendi consequatur optio saepe exercitationem officia iusto maiores. Ad earum placeat excepturi distinctio sit maxime odio. Odio nostrum itaque nihil tempore recusandae. Aperiam laudantium ratione mollitia magnam nam neque. Praesentium necessitatibus nemo iure quam dignissimos. Error explicabo commodi quis ratione in fuga. Expedita amet alias eveniet facilis quibusdam ex quaerat eius non. Alias temporibus facilis. Repellat quisquam corporis. Omnis nulla quia eum accusamus. Sapiente dolorem quas aperiam quis enim beatae modi.

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