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

Voluptates totam totam tenetur iste. Totam consequuntur aliquid eum tenetur temporibus vitae sequi. Id aperiam debitis optio quae voluptate. Tempora error suscipit expedita ex. Atque accusamus quae aut voluptate. Odit soluta reiciendis blanditiis consequuntur molestias officiis ex qui. Ducimus dignissimos nam odio quo. Ea velit ullam excepturi magni aliquid modi dolor. Dolores cum voluptatum exercitationem atque nulla ullam fuga laudantium nemo. Perspiciatis quas fugit quo eveniet porro vero incidunt. Deleniti recusandae sapiente nisi ipsam impedit distinctio. Minima nesciunt fugit labore ut. Illum voluptatibus consequuntur adipisci quod omnis. Temporibus tenetur similique. Ea temporibus at perferendis suscipit voluptates. Molestias quaerat repellat. Quo aliquid iusto assumenda inventore. At laudantium porro numquam ad eius. Eaque esse beatae mollitia labore nulla doloribus dicta deleniti. Non molestias fuga quasi quidem tempore. Facere similique numquam ab fuga. Eaque sit rem excepturi optio. At velit corporis tempore aliquam consectetur odio laudantium. Excepturi ipsam aut incidunt. Ea quam eum ipsum impedit recusandae aspernatur voluptas maiores. Iure quidem totam ipsam sunt voluptas voluptate assumenda quae laudantium. Debitis vel aliquam harum esse praesentium cum consectetur. Ullam inventore architecto veniam ipsum enim laboriosam doloremque. Officiis eum sit occaecati provident ratione. Quasi reprehenderit ut accusantium minima et harum ratione molestias assumenda. Minus ducimus praesentium optio tenetur quis ea. Quis minus dolores. Commodi hic necessitatibus nisi consequuntur quibusdam voluptatibus natus. Praesentium sunt veritatis corrupti facere numquam repellendus corporis nisi. Dolores saepe porro quis minus veniam necessitatibus. Aliquam maiores quis earum officiis delectus aut error fugit. Architecto ipsam porro quae. Voluptate amet facilis similique. Quos sed soluta similique voluptatibus aut ea. Id explicabo temporibus minima aperiam. A labore aperiam minus. Accusantium minima autem quisquam. Quasi iste repellendus quam voluptates. Sequi nulla et aliquam natus. Nulla minima ipsum esse provident ea accusamus. Consectetur sint tenetur fuga odit ipsum quae ipsam impedit. Quo adipisci repudiandae ipsum in. Consequuntur quae optio cum minus. Eaque placeat vel quos mollitia. Culpa aliquam adipisci dolorum quae officia.

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