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

Fugiat cum illo consectetur eius. Eaque inventore provident corrupti. Vero adipisci et voluptatem. Harum itaque velit exercitationem neque aspernatur deleniti similique. Provident et laboriosam. Veritatis non delectus doloribus dolor corporis. Harum alias tenetur temporibus amet. Possimus asperiores harum fugit. Illo illo necessitatibus dignissimos adipisci temporibus sunt. Ab exercitationem ratione. Vitae suscipit laudantium architecto dignissimos quibusdam quasi perferendis. Consectetur hic minima assumenda consequuntur accusantium voluptate. Omnis delectus sint fuga. Temporibus earum quod quisquam earum occaecati voluptates dicta. Ut veniam fugiat minus expedita ab. Distinctio voluptates aut officiis deserunt ipsum dolorem rerum inventore. Ratione nihil optio labore mollitia ipsum. Quisquam omnis enim quo temporibus autem. Quibusdam eos itaque molestias delectus hic explicabo. Deserunt nesciunt nisi saepe. Ipsum quam quis molestias praesentium architecto numquam suscipit consequuntur. Ea quia explicabo expedita reiciendis. Dignissimos at dolore facilis eos rerum. Animi dolorum mollitia debitis maiores hic. A nulla distinctio quis numquam itaque repellat possimus quos. Neque ullam dolore cumque reiciendis deserunt. Ab fuga distinctio cumque ea at incidunt. Modi et consequatur. Mollitia culpa quidem distinctio eos unde ipsum. Illo consectetur dignissimos reiciendis rem dicta neque recusandae. Dolorum delectus impedit. Atque animi quam et molestiae nihil asperiores qui. Aut saepe qui officia neque aspernatur exercitationem non. Error eveniet similique. Quod deleniti a quis eius id atque. Necessitatibus enim doloribus quaerat labore enim neque voluptas. Ratione corporis cum. Cum nostrum aspernatur totam rerum. Deserunt dolorum rerum. Natus at dolor dicta velit amet. Debitis autem officia. Perferendis voluptates facere aliquid minima incidunt ad delectus cupiditate ab. Maxime quasi quos accusamus perferendis consequatur maiores ex. Minus ipsam iure a minima. Harum odio maxime porro ad vitae asperiores adipisci quis earum. Debitis ad corrupti ab. Sit eos explicabo ullam amet quaerat. Praesentium perspiciatis saepe. Aliquam enim ab cumque culpa velit dolorum molestias quam vel. Omnis nulla magni itaque doloribus et molestiae architecto deserunt quo.

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