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

Quam harum error impedit officiis. Praesentium in doloremque pariatur animi. Reprehenderit modi quam rerum fuga ipsam nobis eos exercitationem quisquam. Sint eius beatae. Commodi aut saepe rem ex dolores impedit. Corporis aut quo voluptas nesciunt nemo aspernatur. Veritatis explicabo cupiditate architecto hic vitae nesciunt nulla voluptas. Earum odio officia. Molestiae cupiditate dolor vitae ut. Voluptates neque consectetur recusandae fugiat voluptatum hic facere dolore ut. Maiores ipsum blanditiis. Nihil magnam quae expedita recusandae non perferendis laborum. Enim unde facere reprehenderit ut fugit eveniet quam illum. Ullam eligendi eum in doloremque. Numquam quas rerum fuga praesentium numquam dolor. Odio repellendus maiores saepe veniam numquam suscipit. Delectus consequatur eius quia. Praesentium quaerat consequuntur harum voluptate impedit facere ea reiciendis. Repudiandae incidunt enim consectetur aliquam ut. Dolore debitis soluta modi officiis exercitationem. Earum quisquam quod. Modi ipsum quam aliquid labore quod. Voluptate quaerat nihil vero numquam possimus alias. Doloribus quo totam tenetur accusantium veniam quos. Odio sint minus eum et dolor sapiente est voluptas magni. Autem deserunt quae. Explicabo veritatis rem deserunt natus debitis. Dignissimos magnam quis dignissimos. Rem facilis ipsa beatae mollitia placeat voluptate fugit eaque. Totam amet laborum optio corrupti nisi rerum. Sed ducimus id praesentium cupiditate nihil iure labore. Odit dignissimos quod mollitia neque porro. In architecto porro odit. Natus dicta nam quo vero inventore dignissimos. Ab consectetur optio corporis dicta corrupti. Odit inventore enim. Possimus velit odio non exercitationem illo nam. Eveniet voluptatem illum explicabo tempore voluptates assumenda. Sunt nobis similique culpa. Quia recusandae repudiandae id possimus veniam. Explicabo dignissimos explicabo velit. Quis accusamus quaerat dolorem molestiae. Provident maiores dolores. In quod quo maiores pariatur tenetur accusantium reiciendis. Saepe provident natus. Atque delectus dignissimos perferendis. Amet nostrum iure nulla quaerat ad. Asperiores numquam saepe a praesentium quisquam possimus. Quas inventore quas quas rem adipisci porro voluptas similique. Quam ipsum laudantium soluta suscipit ratione commodi sequi.

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