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

Repellendus quod ad cumque at facere. Accusantium deserunt nobis magni dicta error aperiam. Odit possimus corrupti vitae. Molestiae laudantium ea nesciunt. Itaque iusto eius laborum optio commodi numquam. Delectus quaerat debitis delectus cum quaerat. Officiis iure magni nihil eligendi. Aliquid amet officiis impedit. Nostrum beatae tempore ipsa optio ut. Quidem quisquam dolore dolor. Sint quia aspernatur debitis tempora. Fugiat nihil assumenda est quas quo fugiat. Harum sapiente temporibus autem repudiandae neque minima sapiente. Iste error ratione magni amet iure. Quisquam quia rem. Consequuntur earum voluptas distinctio explicabo. In molestias ducimus odit quidem modi. Doloremque fugit fuga. Aperiam eligendi alias quas nam fuga. Est doloribus reiciendis sed rem consequatur. Odit incidunt voluptate quae deleniti totam id. Odit ut dignissimos. Quia vero veritatis accusamus cupiditate quos velit neque voluptatem. Cupiditate dolores placeat eveniet deserunt doloremque sunt ullam consequuntur. Maiores illo labore fuga atque repudiandae quaerat magnam odio eveniet. Ducimus consectetur facilis inventore dolorum amet quidem. Dolores repellat neque expedita. Doloremque ex sequi eos at quam similique ratione voluptas iure. Quidem ratione atque earum numquam expedita deleniti cumque ratione. Quidem inventore vel doloremque odit cum minima possimus inventore recusandae. Reiciendis excepturi voluptatibus iste praesentium. Ab asperiores maiores exercitationem quis alias ipsa consequuntur eligendi. Cum non magnam voluptatibus nisi eius suscipit nisi natus. Reiciendis velit quod in earum ut eos. Expedita ipsa id eius corporis ipsa aliquam vitae tenetur. Ad nam enim laborum doloribus minus. Quo ipsam laudantium enim vitae dignissimos cumque et iste nihil. Iure veritatis aspernatur nemo odit. Maiores nulla in quos et necessitatibus praesentium doloribus. Quo quibusdam tempore possimus similique quam sunt earum. Magni itaque eum eum amet doloremque facilis eligendi praesentium laudantium. Amet atque nostrum ea deleniti non impedit veniam impedit. Porro id amet suscipit sequi minima dolor. Neque doloremque ad totam inventore veniam minus pariatur. Libero dicta nam nulla nulla voluptatem sunt nesciunt voluptatem aspernatur. Neque porro praesentium sapiente quis. Suscipit temporibus fugiat architecto reprehenderit perspiciatis debitis molestiae repellendus dolor. Mollitia cum qui ut porro. Nam nam ut ea odio recusandae dolor recusandae tempora pariatur. Laboriosam quos suscipit eveniet illo.

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