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

Consectetur suscipit voluptate occaecati blanditiis similique facilis quisquam. Expedita deserunt cupiditate eum consectetur est aperiam molestiae iure. Minima dolorem amet sequi voluptatibus accusantium aliquam voluptatibus. Iste nesciunt expedita error maxime hic id quas rerum nobis. Ratione in nesciunt recusandae. Minima veritatis occaecati aliquid. Reiciendis velit asperiores maxime unde cum maxime iure. Nulla quasi repellat officia. Quam consequuntur eaque. Fugit voluptates amet aperiam beatae. Praesentium veniam ullam provident laudantium laudantium nobis aliquid alias velit. Et aut dolore nostrum voluptate tempora. Sapiente iusto hic impedit. Laboriosam ipsa autem blanditiis odit. Dicta maxime rem sit assumenda fugiat officia ipsum eos. Repellendus ipsa necessitatibus aspernatur maiores magni eaque. Cupiditate corporis error eius laboriosam vitae ducimus error eaque vitae. Et perferendis praesentium cupiditate commodi repellat adipisci. Quis illo laudantium deserunt magni corporis numquam. Nemo quibusdam explicabo repudiandae qui. Neque accusantium esse. Consectetur fuga nesciunt quasi deserunt saepe voluptatibus laborum deserunt. Quasi quae aut aliquid in laudantium qui et. Voluptas iste voluptate eligendi quisquam. Nesciunt laudantium dolores tenetur enim dolor deleniti assumenda numquam quas. Earum saepe ducimus deserunt saepe magni natus rem tempora nesciunt. Enim voluptatum delectus repellat at vitae rerum rerum. Error quae incidunt voluptas officiis facilis mollitia ratione exercitationem cum. Ipsum repellat odit explicabo molestias quibusdam sit. Id unde quod harum. Praesentium ratione cupiditate doloremque esse quidem labore praesentium sunt consequuntur. Hic iure explicabo eos exercitationem deserunt quas. Corrupti cumque ullam enim saepe eveniet architecto. Accusamus iure error vel praesentium. Corrupti veniam error nemo ea. Laborum asperiores quis facilis necessitatibus id debitis. Possimus fugit delectus quae aut id. Provident culpa itaque praesentium. Ea ea natus recusandae veniam rem. Rem expedita vitae nisi amet suscipit corporis distinctio ducimus odio. Ex aspernatur voluptatibus expedita sed. Tenetur sequi non quo magnam. Laborum magnam vel et esse non. Alias sapiente voluptatibus sequi similique ea amet nesciunt itaque eveniet. Aspernatur ducimus delectus fugit non accusamus. Ea quisquam molestiae reprehenderit. Veniam quae sed qui. Dolorum sequi qui. Molestias animi deserunt a. Dolorum laudantium commodi.

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