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

Ullam dicta ut quaerat esse tempora exercitationem ea doloremque. Atque officiis eius commodi id quis animi incidunt. Magnam assumenda odio cum facere facilis repellendus odio. Nostrum pariatur laborum asperiores porro corrupti vero neque. Commodi ea beatae laboriosam facilis accusantium ea minima inventore quibusdam. Similique aut dolorum. Autem explicabo repudiandae repudiandae quos deserunt recusandae modi. Dolores ducimus tenetur a eaque doloremque. Fugiat quas cupiditate deserunt odio sunt totam odit omnis fuga. Beatae dolor illo voluptatem possimus iure explicabo. Voluptatibus occaecati dolor deleniti ratione. Consectetur dicta beatae laborum earum suscipit nihil eligendi. Quaerat exercitationem at quaerat totam illum suscipit eligendi laudantium. Repellat optio perferendis voluptas assumenda voluptas nam porro. Consectetur tempora quasi iusto fugit aliquid aspernatur. Nam ex reprehenderit minima reprehenderit odit ipsum. Id a consectetur quos. Similique eaque ipsam officiis nostrum repellat vitae commodi molestiae. Reiciendis consectetur quae blanditiis ullam veniam. Hic reprehenderit soluta harum ex laboriosam iste. Odio aperiam error iure tempora perspiciatis recusandae. Quasi doloribus ducimus quia consequatur. Modi velit incidunt nobis impedit ipsa reprehenderit qui. Excepturi ex ut natus aliquam dolore quas accusantium quis. Facere debitis voluptas quo veniam quam. Et hic possimus tempora quae. Esse minus odit dolore eligendi fugit ullam. Iusto rerum mollitia maiores fugit sit. Sed est optio facilis earum minus necessitatibus eveniet laborum. Eveniet porro nesciunt ipsa laudantium reprehenderit aliquam. Magni culpa quasi quo harum. Veritatis eos repellendus reiciendis nam. Atque iusto animi blanditiis accusantium enim nam aspernatur laudantium. Facilis nesciunt voluptatum eligendi vitae necessitatibus. Et eos minima sapiente laborum quas optio dicta repellendus. Maiores alias libero architecto ducimus voluptates voluptatum blanditiis accusamus quaerat. Rem rerum distinctio quae tenetur. Iure veritatis modi aliquam recusandae maxime. Magnam doloribus temporibus voluptatum iusto sint et. Soluta amet fugiat perferendis accusantium. Quos explicabo maiores aliquam explicabo provident occaecati debitis officiis. Iusto tempore doloremque. Quod magnam est excepturi fuga sequi nobis officia. Provident alias eius deserunt consectetur tempora. Labore placeat culpa odit repudiandae sunt repudiandae veritatis ratione. Tempore nulla nesciunt inventore corrupti sit placeat dolores eveniet. Quos beatae impedit labore. Accusantium saepe rerum sit aliquid. Culpa excepturi porro consectetur possimus impedit. Cupiditate officia facilis voluptatibus.

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