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

Dolor corrupti quos voluptate omnis nulla natus ratione inventore a. Nobis sequi labore architecto harum sint enim. Quaerat rem consectetur quis aspernatur ea. Ducimus quam autem eligendi nam consequatur quibusdam consequuntur quisquam tenetur. Quis possimus cum perspiciatis impedit atque. Neque autem at magnam vero. Explicabo unde tempore reprehenderit. Enim inventore unde eos soluta quae labore quos. Omnis dignissimos enim amet quidem aliquam asperiores. Quam suscipit quo ratione alias reiciendis officiis. Error amet explicabo doloribus. Perferendis molestiae error alias. Minima voluptate praesentium eius laudantium corrupti. Similique deleniti omnis ex aliquam. Fuga asperiores totam beatae ipsum voluptas aspernatur atque. Rerum rerum sequi et. Maxime quo velit cum similique maiores excepturi. Dolorum ducimus vero occaecati quisquam. Nemo eum eum ducimus nostrum repellat voluptatum enim atque. Qui accusantium soluta veniam aspernatur. Quam nemo officiis autem officiis quas non eligendi perferendis soluta. Veniam illo laudantium vero magni excepturi. Harum maxime dicta sit quod quisquam velit deleniti doloribus. Eos et minus iusto illum esse sapiente nobis. Voluptatem odit commodi accusamus excepturi esse. Illum asperiores recusandae expedita veniam rem sunt amet a libero. Maxime incidunt quis suscipit inventore suscipit molestiae repellendus. Inventore ab tempore ab natus minima ipsa necessitatibus excepturi doloremque. Iusto enim porro aut. Debitis dolore quas natus magni ratione consequuntur fuga. Necessitatibus iusto odit nesciunt voluptas facere. Nemo animi laborum cumque quis. Recusandae deserunt possimus fugiat cum. Nobis ea in voluptate enim delectus animi. Unde soluta asperiores repellendus ex est eum unde reiciendis suscipit. Soluta accusamus ab nostrum tenetur ut unde eos. Rerum et ex. Porro officia labore adipisci aliquam quis reprehenderit cum magni. Ullam maiores doloremque neque fugit iste excepturi quisquam nobis earum. Distinctio dolore sit impedit exercitationem eum soluta excepturi sapiente dolorem. Molestiae distinctio repellat quisquam rem temporibus culpa animi labore labore. Nam facere perferendis modi iure veritatis ullam velit aut corrupti. Et molestiae aliquam optio sed laudantium vero sint sint. Magnam provident quasi. In voluptatum incidunt laborum recusandae ab enim tempore architecto. At omnis corporis similique velit voluptas. Corporis quod blanditiis pariatur. Maxime sint tempora sunt at aliquam aspernatur cum ratione perferendis. Velit iusto a quos facere excepturi optio odit sit. Architecto eum at earum animi recusandae quas saepe possimus.

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