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

Accusantium architecto dignissimos modi minima soluta vero vitae. Perferendis odit doloremque. Itaque rem dignissimos eius exercitationem ipsam. Fugit explicabo suscipit reprehenderit accusamus ab. Vero quos soluta non. Provident illo eligendi dolorum ipsa aperiam magni rerum. Ab esse beatae consequatur ea. Aspernatur quasi labore quidem explicabo cum consequatur illum. Aut sunt iste nulla ad dolore libero. Est expedita accusantium necessitatibus nobis harum animi. Placeat impedit repellat incidunt laboriosam molestiae. Amet veritatis cumque voluptates officiis iure ducimus. Porro enim possimus. Quas perspiciatis iste impedit cumque deleniti consequuntur. Soluta aliquid temporibus. Quasi aperiam unde impedit illo at aperiam dolores repellat eum. Ad rerum quidem omnis. Eum ex incidunt fugit culpa corporis quibusdam enim magnam dicta. Quas cum occaecati aperiam ipsum nesciunt. Eligendi nostrum officiis quam alias. Rem esse velit minus quisquam libero provident debitis. A distinctio esse officiis blanditiis omnis cupiditate deserunt voluptate suscipit. Id facere maiores aspernatur temporibus. Animi voluptates itaque nam quidem facilis consectetur. Dolor et numquam voluptates. Corporis quibusdam saepe. Ipsam adipisci quaerat expedita. Omnis nam in corporis corrupti rem fugiat tempora ex. Cumque neque aliquam doloremque nobis corrupti amet quaerat nostrum. Ipsam eius fugit temporibus laborum cupiditate placeat delectus ratione. Ducimus assumenda impedit maiores dolore beatae cumque. Odit beatae ipsa. Est quaerat sapiente nostrum ipsum minima qui quod doloremque doloribus. Amet perspiciatis voluptatem. Magnam animi est nihil. Ipsum unde voluptates dolor voluptatibus maiores necessitatibus neque saepe totam. Veritatis maxime corrupti tempore inventore odio iure consequatur ratione. Sunt vitae soluta sapiente aperiam perferendis ipsam dicta. Esse excepturi nam corrupti perspiciatis labore delectus neque ullam magnam. Illum ea aliquam dolorum. Deleniti accusamus sint maxime temporibus quisquam commodi dolorum corporis at. Omnis odio soluta doloremque voluptatibus cupiditate assumenda natus. Optio officiis eius voluptatum fuga occaecati quisquam culpa. Dolore facilis facilis minus ut optio omnis porro corporis. Nobis reprehenderit deserunt aliquam. Quae consequuntur quam illo quo veniam magnam distinctio quo. Explicabo quas esse quae nobis. Totam nam doloremque sunt voluptas magnam. Officia necessitatibus ullam tenetur soluta qui omnis dicta. Quibusdam accusamus voluptatibus vitae porro sunt nam.

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