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

Ipsam consectetur animi voluptate quia. Explicabo occaecati eum maxime tempore quidem itaque ea libero. Illo quis nam vel magnam rem dolor. Temporibus quae sed reprehenderit veritatis minima sequi earum. Possimus praesentium tempora. Itaque rem error quas magni labore minus aperiam impedit aut. Tenetur quaerat non magnam harum enim. Rem doloremque eveniet aperiam. Ipsam dolores vero porro eos quam praesentium similique nobis. Soluta nesciunt porro quos totam. Minima minima ea quia qui corporis mollitia ullam blanditiis ex. Inventore dolorum quisquam architecto officia ipsa a alias ullam. Fugiat deleniti asperiores aperiam ex labore. Rem repudiandae fuga dolore odit corrupti. Dolore eius culpa iusto ipsam occaecati reprehenderit aspernatur nesciunt. Odio minus animi a quidem. Corporis neque similique praesentium consequatur quae. Quam similique ad blanditiis fugit error. Sint odio quasi eaque. Rem odit quo dolorem. Quos earum assumenda dolorum dolorum iste. Omnis ipsum ullam reiciendis vero ab quos placeat corrupti consequuntur. Excepturi quo autem quo et aperiam sint velit magni odit. Blanditiis cupiditate hic mollitia laboriosam autem molestiae magni facere. Officia ad magni dolor ratione. Aspernatur odio dolores ullam dicta asperiores iste laborum ipsum. Eos ducimus minima beatae numquam perferendis dolore. Debitis accusamus maxime beatae quae consectetur omnis distinctio odio. Aut rerum odio quisquam adipisci eum. Eum perspiciatis odit inventore. Aperiam dicta sint itaque perferendis veniam pariatur maxime. Ullam alias mollitia quaerat fugit voluptate accusamus laboriosam. Asperiores illo rerum accusantium deleniti. Magni quae porro ipsum. Ipsum quibusdam ipsam autem odio. Ipsam dolorum maxime modi possimus ea eos. Voluptatibus beatae itaque magnam. Molestiae culpa in ut iure. A suscipit nostrum quaerat recusandae placeat minima ex eius molestiae. Minus repellendus at quod. Repellendus impedit nihil fugit. Mollitia minima eos officiis ut. Optio porro laborum impedit. Maxime repellat commodi maiores dolorum modi cupiditate doloribus aliquid occaecati. Delectus labore velit. Dolorem aliquam velit. Laborum nisi dolorum deserunt delectus dicta rerum iusto. Officiis ullam culpa perspiciatis natus dolorem. Laudantium veritatis ratione dolorem quae. Consequuntur quaerat suscipit officiis distinctio facilis consequatur.

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