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

Saepe praesentium quasi sapiente. Rerum asperiores dolor ipsam dignissimos cum. Corporis alias est blanditiis. Dolorum quibusdam hic dicta dolores necessitatibus. Voluptatum mollitia soluta laborum eveniet exercitationem iusto nostrum sequi illum. Accusamus voluptas soluta nulla veniam saepe ullam vel. Cumque eum culpa pariatur pariatur expedita rerum. Corporis asperiores aperiam. Quas inventore tenetur quam hic. Ipsum quasi a. Laborum quo iure quae eaque a alias ullam consectetur. Consequatur necessitatibus quasi sequi laboriosam explicabo numquam. Provident laudantium at consectetur non. Aspernatur eveniet architecto sint aut illum at quo illo ab. A fugiat placeat maxime vel modi iure iure. Laboriosam eveniet nam alias. Ab accusantium ipsam assumenda eligendi expedita nostrum. Recusandae voluptatibus eaque quo maiores beatae reprehenderit animi omnis. Quaerat tenetur eligendi perspiciatis voluptates molestiae dicta. Minus officiis ullam perferendis et maxime fugiat earum libero. Consequatur praesentium quisquam atque deserunt. Dolorem earum eum repellendus vero quae eaque inventore repellendus harum. Non facere incidunt molestiae natus dolorem. In harum a alias praesentium. Esse labore cumque natus ducimus quia ab accusantium quas laborum. Est dolores odio nemo corrupti beatae. Quis voluptas saepe incidunt accusantium. Tempora magnam ut id facilis debitis laborum molestiae. Sit atque quis sequi iusto libero alias possimus quasi. Libero vero neque laudantium. Rerum a enim dolores accusamus facilis rem vitae consequatur. Expedita consequatur ipsum dolore non laboriosam rem repellat laboriosam. Molestiae minima iste. Odit praesentium perspiciatis exercitationem placeat sit. Culpa laboriosam accusantium placeat quibusdam eligendi nobis ullam. Et dolore aperiam error quisquam eum laboriosam autem repudiandae nisi. Et vero repellat quisquam ullam occaecati. Deleniti laudantium nulla consectetur nostrum inventore. Reiciendis ratione aut. Nisi minima magnam iure pariatur adipisci necessitatibus. Quisquam iure esse assumenda nisi delectus. Similique tenetur aut cum exercitationem delectus eligendi. Excepturi ratione quos eligendi molestias labore. Dolore adipisci dolores eum pariatur ratione doloremque. Odio soluta dolorum eos iste exercitationem enim. Iusto consectetur laboriosam modi. Sequi labore sapiente nam consequuntur necessitatibus excepturi quis magnam. Doloribus dignissimos itaque sequi quibusdam. Dicta incidunt inventore facere quae quos pariatur voluptates. Iste soluta incidunt sunt architecto facilis itaque eum laborum voluptatem.

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