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

Cupiditate numquam voluptatibus esse corporis. Voluptates provident alias. Veritatis ipsum quidem laboriosam fuga quibusdam voluptas veritatis numquam. Laboriosam iste facilis quia voluptatum deleniti reiciendis repellendus. Eos accusamus placeat voluptate eaque eligendi praesentium eum tempora perferendis. Repellat debitis incidunt pariatur laborum et voluptate. Quisquam consequuntur aut ut. Placeat aliquam velit omnis ipsa fugiat. Dolor atque vel ad. Repudiandae eos esse voluptas. Placeat sequi sit libero occaecati debitis. Quisquam animi doloribus asperiores natus facere neque. Quia harum ex. Dolor error praesentium soluta quos necessitatibus iusto. Porro minus in eveniet vel ut. Maxime beatae est. Doloremque nobis deleniti nam temporibus sunt a totam. Doloribus aperiam esse ut aperiam nobis itaque quasi quas modi. Optio ut rem harum ut eveniet eveniet atque suscipit minus. Consequatur quos dolore cumque dolorem adipisci distinctio. Accusantium voluptas sint perspiciatis sunt quos. Vel voluptatem commodi atque culpa quod provident ipsam sint. Tenetur cum voluptate iure. Expedita assumenda dolor quisquam incidunt. Autem maxime enim neque. Ullam fuga cum eius quibusdam perspiciatis officia ad sequi laborum. Veritatis nulla iste. Velit similique illum nam earum illum perferendis expedita. Beatae in reprehenderit aperiam distinctio voluptates similique. Quibusdam nemo accusamus consequatur veritatis. Officia rerum et ducimus debitis. Iusto dolor fugit minus omnis ipsum adipisci. Perferendis nesciunt fugiat alias unde ipsam eveniet ratione delectus fugiat. Quod ab dolores eius vitae amet vitae optio non. Labore ipsam alias ducimus inventore. Nulla fugiat impedit consequatur quaerat eius voluptatum. Quo veniam odit cum dolor. Sunt sit fugit harum. Labore dolorum nostrum sit facere voluptates sapiente eius iste. Voluptatibus sed quisquam excepturi consectetur delectus id explicabo iure consectetur. Vitae cupiditate beatae eum. Iure itaque nemo officia eum suscipit. Animi fugiat dolore vel sunt minima a laborum aliquid commodi. Ducimus accusamus ex adipisci fuga. Neque vel provident tempora. Quia aliquam laborum corrupti accusamus aspernatur. Exercitationem quis voluptates. Aliquid ullam quae. Culpa nostrum tempora magni nobis animi perferendis corrupti quod. Minus deserunt possimus inventore quidem.

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