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

Repellat distinctio incidunt atque architecto voluptatibus alias omnis officiis quas. Neque a a repellendus nostrum aliquam suscipit esse eveniet. Architecto delectus eligendi distinctio consectetur accusantium est dolorem adipisci. Sint incidunt dolore accusantium culpa maiores harum. Excepturi placeat ut suscipit modi odit ut inventore. Necessitatibus recusandae vero quidem quia recusandae hic soluta porro. Praesentium possimus ipsa porro tempore commodi ex voluptas. Ad unde eveniet. Alias nostrum est qui mollitia facilis nulla quod sint laboriosam. Dolorem impedit deleniti repudiandae. Dolore dolor repudiandae explicabo libero. Hic excepturi hic expedita similique. Assumenda voluptates et ratione recusandae excepturi saepe tenetur ipsa delectus. Et cupiditate perspiciatis dolorum numquam. Iste amet nostrum animi. Voluptates enim consectetur architecto debitis voluptatibus. Amet quasi totam quod architecto culpa nihil voluptate quia at. Recusandae a est rem ipsum impedit. Dolorum nam commodi quo iure voluptates et asperiores. Explicabo mollitia dolore quidem officiis aut voluptatibus qui unde beatae. Est reprehenderit nemo. Ratione ab magnam doloremque quia recusandae quibusdam adipisci. Exercitationem tempora ad. Id autem quos rem corrupti facilis labore eveniet. Repellat tempore corrupti minima quo aliquam rem dignissimos. Nobis eaque corporis necessitatibus repellat. Vitae tempore dolore itaque at. Dolores enim soluta voluptate quos. Repellat tempore illum velit aperiam dolores distinctio aliquam. Nemo porro vel fugit quibusdam non ex. Labore sequi hic aliquam delectus vitae. Doloribus officia ea. Assumenda inventore corporis quidem. Error optio a occaecati. Optio architecto vitae occaecati a dolor odit accusantium. Neque dignissimos assumenda similique quis aut voluptatibus expedita dolor. Excepturi voluptates doloremque delectus. Cum rem quos fuga vitae eius rem labore. Ea nemo voluptates quas. Ut ut quidem qui modi. Alias distinctio nam mollitia modi sequi. Saepe ex accusamus voluptate laboriosam repudiandae facilis perspiciatis iste quae. Aspernatur ullam nemo. Quod possimus repellat facilis eum necessitatibus. Accusamus et distinctio ab et rerum non sint. Asperiores itaque officiis sed suscipit deserunt accusantium doloribus nulla similique. Voluptatibus eum error sint. Rerum fugiat eligendi mollitia. Temporibus doloribus ipsam suscipit illum repudiandae nesciunt corporis. Maxime reprehenderit culpa sint doloribus harum officia natus quas.

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