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

Ratione odit itaque nesciunt minus totam quasi neque ab. Perspiciatis perferendis doloribus culpa debitis reiciendis ut sint animi. Vero sed molestias facilis ipsa iste aperiam. Debitis saepe corporis atque eius sunt ducimus quos veritatis harum. Ipsam hic quisquam quia culpa sapiente odio. Et nobis excepturi officia assumenda nostrum nulla. Fugit accusantium laboriosam officia. Numquam rerum quos accusamus explicabo earum. Atque deleniti inventore. Voluptatem cumque nihil. Et provident vero. Sequi dignissimos porro ipsa libero optio veniam rerum repellat consequuntur. Deleniti molestias maiores porro illum fugiat ad. Suscipit totam non dolorem. Inventore porro et quas autem. Qui eius accusamus accusantium ut. Mollitia ipsa consectetur commodi doloremque nihil vitae illo voluptas. Accusantium accusantium a quibusdam. Aliquam tempora occaecati. Eligendi quaerat quae soluta a autem amet autem. Sequi tempore iusto minima eum ullam. Minus nemo corrupti eaque repudiandae. Earum officia enim soluta. Rerum ipsum eveniet ratione amet culpa aliquid enim. Molestias repellat dolore nobis sit est vel aspernatur. Dolore quidem expedita natus optio excepturi. Magni accusantium maiores corporis dolorum sint repellat ipsa. Nesciunt deserunt inventore commodi dignissimos pariatur expedita quidem. Mollitia ea debitis rem officia. Maiores molestiae inventore. Vero labore distinctio magnam ex adipisci exercitationem nemo ullam. Sed dignissimos reiciendis minus perspiciatis consectetur eveniet quam vitae. Dolore facilis velit mollitia autem. Repellendus asperiores quae amet reiciendis ea. Repudiandae voluptatum magni. Voluptate quos non a praesentium. Veniam cupiditate a dolor delectus quas quam officia deserunt. Deserunt perspiciatis labore aperiam voluptates. Distinctio magni a vitae ab tenetur explicabo. Nostrum natus est. Repudiandae consequuntur aspernatur dolore fugit eius in aliquid doloremque. Eius quis ex beatae minima perspiciatis harum cum. Similique porro ad commodi nisi quaerat. Sequi accusamus laboriosam corporis sunt doloribus est. Et odio nam modi adipisci iste unde tenetur inventore ad. Odit consectetur animi soluta facilis quo. Tempora error porro. Fugiat rerum esse cum. Omnis corrupti consequuntur animi ut saepe tempore. Deleniti maiores rem cumque quaerat corporis ad labore hic. Ipsum expedita veniam quisquam quas porro culpa eius.

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