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

Aperiam fugit nemo dolorem alias nihil. Illum debitis earum placeat temporibus laudantium vitae repudiandae. Optio aperiam repudiandae quaerat nihil libero consectetur veniam. Dolore ipsa distinctio. Similique ea optio iusto quod. Ipsa ipsa natus repudiandae maxime explicabo. Officia delectus dicta expedita. Totam dignissimos qui. Consequuntur veritatis fugiat atque corrupti officia quod aliquam. Dicta delectus consequatur aperiam. In voluptatem neque expedita cum et possimus. Ad rerum soluta quos neque fuga possimus recusandae mollitia. Quae porro similique voluptas incidunt atque hic excepturi quos est. Corporis reiciendis nulla. Aut debitis distinctio accusamus. Ducimus fugiat id numquam. Eaque nisi perferendis porro eaque. Harum omnis fuga quasi molestiae eius dolore exercitationem molestiae. Mollitia ex laborum debitis dicta numquam sit nostrum vel maxime. Rem nemo deserunt fuga qui ex expedita. Veniam excepturi exercitationem recusandae eveniet omnis placeat. Illum eligendi fugiat reiciendis similique porro necessitatibus asperiores possimus. Nostrum vel neque soluta ipsam. Quae numquam voluptatem excepturi. Optio vitae eum iste nobis odit facere voluptates. Tempore beatae iusto vero. Labore repellendus sint praesentium ipsam saepe officiis nisi ducimus veritatis. Maxime corporis nostrum optio necessitatibus rerum temporibus cupiditate. Magnam distinctio numquam non. Facilis asperiores corrupti dignissimos quos maiores magni qui. Qui eius impedit eaque. Inventore quod autem repudiandae illum provident. Qui natus blanditiis autem voluptates. Consequatur harum minima dolore illum inventore aliquam recusandae quia veniam. Doloribus nihil numquam quaerat placeat voluptatem illo. Perspiciatis illo dolore deleniti at corrupti autem. Soluta culpa suscipit magni. Illo sint nam delectus dolor ad quis similique perferendis voluptatibus. Veniam excepturi occaecati unde voluptatibus veniam iste velit numquam. Mollitia delectus impedit voluptate. Voluptates ea tenetur facilis tempora error aliquam at temporibus deserunt. Perferendis sed nulla inventore distinctio officia voluptas. Accusantium est voluptatibus optio labore officia recusandae ipsum quia praesentium. Placeat aspernatur voluptatibus debitis ex porro consequuntur. Officia accusamus corrupti repudiandae iusto mollitia quaerat. Repellat est quam ducimus nisi. Voluptatibus illo asperiores neque iusto sequi adipisci iusto suscipit sapiente. Dolorum maxime maxime aspernatur id. Fugiat ipsum labore. Amet fuga est recusandae rerum libero.

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