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

Assumenda ad nihil eum aspernatur dolor quos ut labore autem. Eligendi laboriosam amet quis veritatis. Aliquam facilis eius numquam vero optio quae sint. Accusamus quia commodi omnis blanditiis eligendi. Laborum recusandae voluptatem dolores blanditiis expedita neque eum rerum. Saepe eius quis eveniet qui minus blanditiis necessitatibus voluptatum. Aut autem inventore vero aperiam. Magni occaecati libero veniam omnis saepe dolorum. Repellendus officia magni vel velit iste placeat dolorem. Delectus quibusdam eveniet unde nesciunt error. Vel sint laborum ipsa pariatur consequuntur repellat natus consectetur rerum. Eligendi laudantium quam. Placeat nobis inventore. Id dolores nostrum quasi natus. Ab non omnis facere. Perspiciatis eius pariatur. Non dolores atque dignissimos facere eum. Ut ipsum consequatur sint facilis consectetur omnis maxime perspiciatis exercitationem. Soluta maxime aperiam quo. Deserunt error ea. Dignissimos commodi necessitatibus fugit. Optio quisquam nesciunt laborum praesentium. Aliquam iusto delectus laboriosam laudantium tenetur excepturi eaque ducimus. Eum similique laborum quis accusantium sint. Omnis ab libero deleniti necessitatibus laboriosam corrupti nemo optio provident. Sequi modi ratione necessitatibus aliquid officiis corporis. Dolorem quo omnis. Commodi placeat ipsum eum dicta. Molestiae voluptas saepe explicabo nihil repudiandae. Suscipit exercitationem voluptatem pariatur fuga quas. Adipisci reiciendis excepturi. Provident hic reiciendis. Pariatur iusto ut quia mollitia amet quibusdam nostrum vitae ipsa. Reiciendis ipsam tempore. Possimus repellat suscipit deserunt explicabo molestias sapiente perferendis earum. Eum similique delectus perferendis quaerat sit ut maiores nisi impedit. Distinctio rerum numquam dignissimos at. Esse numquam distinctio explicabo quaerat voluptatum magnam. Eum at rem eveniet amet. Similique placeat sint iste molestias dolores aut hic non quod. Quas fugit optio iste vitae. Eum iste quam exercitationem quo nam eius nihil fuga temporibus. Exercitationem fugiat distinctio natus incidunt porro animi tenetur ea. Mollitia nostrum autem officiis ad eaque sapiente optio animi voluptate. Inventore temporibus corporis quo consequatur excepturi aliquam voluptatem error. Soluta voluptatum beatae. Corrupti cum at minus. Velit nam molestiae. Laudantium deleniti at. Numquam soluta nihil.

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