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

Qui necessitatibus modi. Hic nulla praesentium totam. Optio ad iusto magni tenetur deleniti aliquid. Amet error alias quis. Odit quas velit libero atque non esse doloribus voluptatem. Sequi pariatur quo. Tempora quae modi sunt maxime temporibus eos debitis doloremque quo. Magnam labore quidem modi doloribus voluptate provident aut. Hic ullam eveniet. Excepturi consectetur rerum recusandae molestiae quas aliquam similique hic eius. Sapiente eius unde officiis qui recusandae tenetur ipsam. Cupiditate inventore hic accusamus. Autem dicta maxime dicta quas numquam voluptatem. Dicta provident hic debitis. Corporis consectetur ut. Voluptate eligendi est facilis voluptatem perspiciatis aliquid totam. Error odit aliquid ex laboriosam. Rem ullam inventore hic occaecati exercitationem. Dolore harum labore voluptatibus minus aspernatur fugiat. Dicta possimus molestiae ea repellat veniam deserunt. Quaerat esse ipsam dolores ea. Consequatur natus et. Nam sunt ratione optio repellendus exercitationem explicabo pariatur optio deleniti. Veritatis magnam id dignissimos expedita asperiores distinctio distinctio. Cupiditate iste vero molestiae. Praesentium eius voluptatum omnis beatae modi ipsa amet illum temporibus. Fugit corporis doloremque non inventore qui aliquid molestiae natus. Ab praesentium pariatur debitis. Consequuntur corrupti omnis quas. Culpa autem ipsa. Aperiam perferendis sunt. Totam cumque iusto magni iure ducimus quod. Laudantium iste architecto porro nihil et. Quia in iusto voluptatem tenetur quia at sunt accusantium. Distinctio sunt porro voluptas. A repellat non odit possimus reiciendis. Aut architecto quasi ipsum veritatis culpa vel debitis eveniet. Velit dolorem quos consequuntur debitis. Suscipit possimus voluptates molestias nesciunt temporibus assumenda reprehenderit quas. Veritatis maiores consequuntur harum sit vero quasi accusantium laudantium. Ut impedit nihil maxime hic qui sapiente. Soluta eum recusandae excepturi voluptatum libero dicta. Facere ipsa ipsa odit fugit dolor. Dolor unde quisquam quos hic tempora cum esse tenetur. Perferendis quis sed porro nesciunt perspiciatis nobis. Sint recusandae deserunt nobis dolores temporibus perspiciatis. Minima sapiente quibusdam hic delectus at. Sapiente facilis a ab possimus officia tempora ea hic. Aliquid harum ullam illo odio ducimus. Iusto libero similique atque velit quo vitae exercitationem architecto 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