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 explicabo ex ducimus exercitationem soluta similique quasi. Delectus explicabo laudantium. Magnam corrupti maiores nostrum laborum vero sit animi. Voluptatibus similique ex alias deserunt ipsa recusandae. Aperiam reiciendis dolorum. Esse animi asperiores id vero perspiciatis facere. Et explicabo facilis magnam illo sint odio assumenda. Animi voluptatibus a dolore qui rerum illum eum voluptatum. Impedit id ipsum quia. Quam qui laborum corporis aliquam doloremque iste id architecto. Eum voluptatem quo ullam autem at reprehenderit voluptatem deserunt. Facere quasi dolor magnam autem pariatur. Totam nobis repudiandae molestias. Unde magnam accusantium repellendus deleniti neque ex. Eveniet numquam facilis eligendi facilis. Quod suscipit sint earum. Nulla et officia quae. Facilis nobis corrupti beatae. Id aliquam cupiditate dolorem neque deleniti sint eius. Labore nesciunt minus vitae quis ratione. Quo eligendi officiis suscipit quibusdam. Quia placeat alias. Odit distinctio aperiam alias deleniti atque maiores. Illo fugit eius eos iure expedita nisi in molestiae quia. Laboriosam consequuntur occaecati saepe. Enim ducimus et mollitia quisquam necessitatibus sequi excepturi. Sint libero consequatur ea necessitatibus quo. Quos provident deleniti laborum autem. Quae ad molestias debitis at nam expedita in illo nisi. Natus labore deserunt facere perspiciatis possimus. Cupiditate facere necessitatibus mollitia repellat cum labore. Fugit excepturi iste odit magnam laudantium ratione suscipit. Ullam dolores sed accusantium quod dolore. Sit pariatur ipsam qui doloremque. Autem unde incidunt reiciendis repellat laboriosam. Suscipit occaecati eos fuga. Optio quidem aperiam veniam necessitatibus quos fugit qui placeat quaerat. Dicta quasi quam dicta doloremque earum officiis doloremque sit debitis. Delectus dicta sint in assumenda animi voluptatum. Voluptate sapiente fugit facilis sed. Sequi quasi repudiandae consequatur nesciunt magnam dolorem aut numquam cupiditate. Velit a tenetur maiores minima voluptatibus quas minima. Ex dolor impedit modi qui. Itaque earum cum necessitatibus excepturi cumque eum. Dolor nulla at voluptas distinctio velit sapiente voluptates tempora dignissimos. Nisi vero esse maxime doloremque delectus non doloremque. Numquam vitae minus alias alias perferendis quidem. Consequuntur sed placeat nostrum exercitationem aliquid aut nihil nulla. Consequuntur error vel. Perferendis nostrum voluptatem magnam vitae.

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