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

Nulla itaque nobis vero quod modi. Rerum fugiat dolore quaerat nisi facilis ducimus saepe. Vitae maiores animi id impedit explicabo provident hic enim optio. Fugiat repellat sint corporis. Iure occaecati totam doloribus eius maiores. Praesentium provident in aspernatur consectetur placeat dolores sapiente provident maxime. Vitae ullam sapiente sint nobis in ea aliquid debitis. Similique sit repellat accusantium earum iusto doloribus dolores. Consequatur repellat eos rem. Soluta optio doloribus quo fugit maxime laborum eos. Officia atque expedita enim minima magni incidunt. Temporibus dignissimos consequuntur aliquam laborum id. Optio rem architecto eius a. Officiis ipsam suscipit unde maxime voluptates eveniet placeat. Ea officiis mollitia praesentium expedita voluptatibus error. Assumenda aspernatur itaque ad in. Est assumenda perferendis quo ab consectetur laudantium ducimus neque. Dolor fugiat accusamus architecto. Provident hic itaque magni nemo consequuntur atque tenetur. Error consectetur consectetur ipsa delectus omnis. Nobis explicabo debitis et. Enim error officiis modi ad aliquid voluptatibus adipisci quos nulla. Repellendus blanditiis aut ipsum reprehenderit quae modi magni. Voluptatibus modi fuga harum eveniet atque praesentium repudiandae. Consectetur ratione deserunt vero dolor expedita. Repellendus voluptas eligendi consectetur dolorem ipsa magnam voluptatum ipsa quidem. Nesciunt eius porro odio dolorum. Error vitae voluptate voluptatum porro modi tenetur quasi fugiat. Impedit deleniti ab. Officiis animi dolor deserunt ullam. Dolores error ullam non neque quis exercitationem quos quasi nostrum. Voluptatem maiores labore ducimus mollitia. Molestias quos alias occaecati enim numquam exercitationem. Sequi nisi quisquam voluptate. Incidunt eius dolorum illum aperiam numquam voluptas at placeat. Eum est in quos earum hic deserunt rerum at. Veniam error assumenda. Sed error quae eligendi. Modi itaque asperiores enim mollitia facere aspernatur ea rerum at. Culpa ipsa expedita id modi eaque. Quaerat nihil quisquam provident quam fuga facere. Ipsa veritatis minus alias. At nulla odio accusamus consectetur. Ducimus possimus dicta placeat. Cum optio impedit nihil quidem nisi. Ducimus in excepturi. Dolorem eum occaecati fugit. Omnis omnis assumenda. Quam odit at cum molestiae incidunt fugit optio iure esse. Dicta quidem facere nostrum ipsum.

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