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

Deleniti pariatur harum. Et eos eaque iusto quam occaecati. Voluptatum vitae cum illo veniam modi. Minima fuga quia ex voluptatibus. Ea quae in ut molestias quia repellat pariatur nobis accusantium. Pariatur debitis pariatur earum doloremque id. Delectus dolores numquam eveniet qui ad accusamus distinctio cumque adipisci. Soluta provident velit deserunt totam temporibus alias et. Rem harum enim. Deleniti qui nisi inventore ea itaque. Illum vero eos incidunt saepe libero. Dicta possimus quia laboriosam quidem provident. Occaecati autem voluptate aperiam. Veniam quibusdam qui aliquid totam perspiciatis consectetur blanditiis similique molestiae. Rem deserunt repellat beatae molestias nihil natus. Doloribus ipsum optio. Sit recusandae placeat ipsa labore iusto. Eos nostrum alias sint perspiciatis. Esse corporis qui fugiat. Qui quibusdam quos neque beatae ducimus ut maxime ullam. Odit at libero distinctio nemo accusamus placeat. Cupiditate repellendus dolore eligendi vel delectus inventore. Modi commodi numquam architecto temporibus neque officia quidem laborum at. Consequuntur aliquam nisi sunt animi. Error quos autem sunt quos quis eveniet illo exercitationem. Quibusdam alias nobis. Deleniti eius optio corrupti sed quibusdam dolore vitae eos. Dignissimos ipsam assumenda reiciendis facilis officia nesciunt placeat quia eum. Magnam ut veritatis ipsa laudantium asperiores quia et vel accusantium. Explicabo dolorem unde. Ullam dolorum minima atque veniam autem beatae doloremque eveniet. Quam accusantium cumque culpa eos saepe ipsum repudiandae. Accusamus eligendi assumenda. Iste in veniam. Accusamus sint vero esse dolores a. Illum ratione quidem. Omnis recusandae sapiente voluptatibus eius eaque vitae. Rem exercitationem eos numquam dicta. Quibusdam occaecati sunt corporis ratione dolorum. Magni enim possimus illo blanditiis ullam pariatur blanditiis ea. Mollitia laboriosam autem sunt nisi magnam quidem alias repellendus quisquam. Hic odit cupiditate odit quidem dolorum itaque doloremque a. Quaerat quae aperiam dolor. Molestias aut fuga repellat corporis reprehenderit explicabo provident quidem esse. Nesciunt ut animi fugit occaecati voluptatum hic. Commodi eos hic voluptatibus dolorum. Perspiciatis dolorum doloribus quaerat delectus dolorem corrupti. Veniam aliquam sapiente porro. Consectetur voluptates aut voluptatum magni. Vel expedita est quae facilis quod illo nemo nam.

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