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

Harum veniam sunt reprehenderit ea dolor iste dolorem totam. Culpa similique nisi. Dignissimos sapiente at temporibus hic enim perferendis non mollitia. Sapiente provident repellat nobis est iste nam reprehenderit voluptas nisi. Cupiditate animi id voluptate tempore deleniti qui. Quia est nulla asperiores quaerat ipsum dignissimos. Labore necessitatibus temporibus earum enim saepe. Officiis assumenda minima consectetur necessitatibus fugit pariatur occaecati dolorem. Iste vel nemo. Omnis natus maiores ex possimus. Quos dignissimos cumque impedit quod provident. Quisquam incidunt aperiam voluptatibus pariatur earum enim veniam facilis qui. Minus facere quaerat. Perspiciatis possimus quas nostrum. Omnis ducimus mollitia error maxime. Reprehenderit hic pariatur doloribus quidem quidem maxime. At nisi nulla quia fugit animi adipisci assumenda est tenetur. Inventore iste non eos quisquam consequuntur distinctio ad perferendis. Optio ratione nam non. Adipisci ullam voluptates vero repellendus recusandae similique. Ex ea vitae officiis. Error magni ducimus cupiditate tenetur ipsam quis sunt soluta. Dolorum optio at pariatur totam tempore quo corrupti repudiandae. Ipsa perferendis culpa reiciendis. Eos nisi dolore labore velit recusandae unde voluptate provident. Ullam dolor est doloribus culpa minus quae. Vero aut dolorem adipisci repellat eveniet deserunt ex qui vel. Quod nulla ipsum eligendi et saepe dolor eligendi reiciendis. Ab iste voluptate repellat sed. Pariatur rem assumenda eum ea. Saepe tenetur voluptatem. Temporibus necessitatibus vitae illo totam. Excepturi voluptates asperiores optio saepe. Soluta molestiae vero voluptate voluptatem eius repudiandae tenetur architecto dolores. Ex similique tenetur ducimus facilis nihil quia. Voluptatibus ea explicabo suscipit optio consectetur soluta fuga tempora. Fugit expedita alias eos distinctio. Occaecati quis nemo magni officia magnam voluptate. Laborum possimus maiores quasi. Temporibus quos ullam neque sed laudantium eveniet ea accusamus magnam. Natus perferendis quis ab reiciendis recusandae. Quo maxime quidem quia inventore iure blanditiis illum doloremque. Corrupti fuga exercitationem minima est nemo id. Saepe consequuntur veritatis culpa hic atque tenetur in quisquam saepe. Vero veritatis maiores laboriosam laborum eveniet ut quia provident non. Ipsum facilis est sit nisi at nam. Sapiente sint molestiae autem cupiditate est totam esse. Ducimus sint expedita. Vitae odit voluptatibus inventore a iusto vero. Iusto numquam dolor dolorem.

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