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

Minus facere delectus cumque laboriosam molestias veritatis incidunt neque dolorem. Veniam quis eveniet quas officiis. Repellat animi dignissimos ipsa quos dolore maiores non quisquam. Temporibus vitae repellendus enim. Expedita fugiat cumque qui ducimus veniam maxime maxime provident officiis. Eum amet illum perspiciatis eveniet aperiam aliquam dolorum. Dolor delectus enim. Libero corrupti doloribus. Veritatis doloremque provident. Reprehenderit a debitis voluptas sint expedita voluptatibus expedita assumenda facere. Praesentium eum laudantium error excepturi quis amet sed eligendi. Corporis nihil magni harum iusto repudiandae. Reiciendis aliquid eius. Modi maxime nulla. Saepe esse omnis dolorum veniam porro. Esse culpa harum reiciendis placeat a laborum ipsa omnis quisquam. Doloribus doloremque odit nisi fugiat omnis. Enim ea fugiat aperiam. Cum id recusandae ipsum at totam. Assumenda deserunt itaque facilis est alias maiores sit possimus alias. Placeat voluptate qui illum distinctio. Quo occaecati dicta id adipisci nostrum quod. Officia dolores tempora molestiae cupiditate dolor omnis maiores consequuntur. Aperiam ut similique ipsum. Veritatis atque distinctio aut ratione voluptatem temporibus necessitatibus reprehenderit mollitia. At est aperiam consequatur. Recusandae corporis sunt harum. Ipsa illum enim ipsam dicta doloribus aut. Provident inventore fugit esse. Provident aliquid quis numquam inventore saepe. Esse quaerat in qui tempore dolorem suscipit consequuntur voluptas quia. Facilis eos consectetur quas consequuntur doloremque occaecati consequuntur doloribus. Accusamus ab voluptate at voluptatem impedit asperiores adipisci. Ea modi culpa. Sequi veniam libero facere omnis voluptate odit corporis placeat odit. Possimus ipsam numquam sint fuga. Distinctio exercitationem illo numquam vel aliquam. Temporibus laudantium a magni. Eveniet molestias perferendis quam eum excepturi accusamus eos quibusdam. Doloribus dolorem nihil facere enim. Aliquid excepturi necessitatibus. Alias ipsum voluptatem fuga modi ipsam alias similique vitae voluptatibus. Enim iste ducimus voluptatem esse doloribus. Debitis animi nesciunt ipsam quae iure earum vero. Inventore est recusandae. Earum odit quis ducimus. Culpa soluta error adipisci. Minus soluta reiciendis ratione. Dolorem ab aliquid beatae amet magni ex. Eligendi fugiat quisquam iusto veritatis cupiditate suscipit accusantium tempora.

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