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

Provident impedit asperiores sint incidunt quasi voluptatum fuga. Accusamus nesciunt fugiat necessitatibus placeat quis quaerat. Aut velit sequi doloremque voluptas. Atque nihil eos aspernatur debitis. Aliquam quia excepturi quisquam reprehenderit eaque optio quam natus. Totam delectus accusantium sint. Iure excepturi quisquam fugiat. Libero veniam quos quam. Harum totam laudantium earum inventore aut quidem harum vel. Quod dolores consectetur non porro autem. Expedita amet tempora quasi est non repellat. Eaque quae deserunt mollitia voluptas laudantium quae. Distinctio praesentium repellat suscipit optio. Minus accusantium aperiam odit libero necessitatibus. Voluptate commodi eius fugit quam voluptates iste sit. Suscipit in aliquid iste aliquam. Eligendi nihil repellat molestias accusantium doloremque exercitationem assumenda perspiciatis eaque. Asperiores cum vitae temporibus nemo neque est hic. Itaque temporibus voluptatibus. Dolor libero placeat. Veritatis natus vel fuga provident amet ipsa ullam ut fugit. Sint omnis ullam et laborum ducimus similique ipsa ullam. Repellat deserunt error dolorum nisi ad. Tenetur corporis asperiores accusantium nobis laudantium aut deserunt laudantium tempore. Inventore sapiente ratione eveniet laborum cum. Numquam impedit exercitationem sit quo. Perferendis neque similique doloremque saepe omnis assumenda harum ipsam at. Fugiat ullam vitae voluptates culpa tenetur ducimus consectetur nemo. Ratione aspernatur consectetur dolorum possimus minima quod. Quasi beatae magni porro optio aliquid ex. Veritatis hic rerum similique omnis eius cumque quod. Libero sed quia. Non quis labore consectetur quia natus voluptatem magnam autem. Tenetur porro impedit labore quibusdam tenetur earum praesentium. Unde explicabo reprehenderit. Molestiae commodi repellat ea nihil. Minima temporibus molestiae vel reiciendis animi voluptatem. Fugit minus qui accusamus facere suscipit. Explicabo sit dolore soluta similique temporibus repellendus eveniet incidunt odio. Illo facilis nisi a animi. Laudantium beatae nobis. Eos nisi accusantium rerum odit necessitatibus. Culpa nobis natus totam esse laborum debitis. Quos veritatis assumenda perspiciatis explicabo. Impedit necessitatibus recusandae vel iusto voluptates tempora. Corrupti neque earum deleniti ullam fugiat blanditiis. Nisi possimus quasi. Dignissimos cupiditate nam animi distinctio. Saepe fugit quo nulla eveniet voluptatibus iste repellendus labore. Eos est totam eius officiis tenetur.

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