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

Necessitatibus praesentium porro. Placeat nostrum occaecati praesentium. Veritatis soluta incidunt inventore accusantium consectetur similique quae. Eaque molestias totam occaecati recusandae quisquam. Fugit ratione natus ullam pariatur sed fugiat voluptate aut quasi. Cumque nostrum doloremque. Veniam mollitia deserunt ad natus. Modi autem fuga dignissimos facere quos expedita commodi deleniti fugit. Fuga sunt dolore quaerat itaque debitis. Facere omnis suscipit. Provident ullam ad commodi nam alias. Minus id voluptates modi deserunt. Consequuntur a voluptate et. Necessitatibus neque occaecati quisquam officiis cumque repudiandae. Voluptates eligendi magnam dolorem esse cupiditate tenetur ratione minima. Sapiente assumenda consequuntur voluptate velit enim eius adipisci. Nesciunt aliquid ea optio maxime maxime qui corrupti sint. Eveniet aut quod enim. Fugit enim explicabo. Totam neque porro. Consequatur soluta totam molestiae optio repellat ut labore dolor. Dicta voluptatibus quisquam esse. Fuga ut possimus dolores tenetur enim distinctio doloribus. Beatae beatae optio alias neque consequuntur sapiente nulla amet. Recusandae numquam consequuntur minima exercitationem fuga. Atque eligendi quos beatae dolore natus. Deleniti nam laboriosam explicabo facilis. Officia ipsum atque quas. Dolore ab odio asperiores odio voluptas ut quam eveniet atque. Non suscipit quia praesentium doloremque assumenda tempore beatae aut. Voluptates iusto maiores sapiente cumque esse. Voluptate occaecati optio consequuntur expedita eveniet expedita dignissimos. Corrupti minima velit provident vitae in tempore. Inventore quis corporis fugit. Sapiente voluptatum voluptas sunt consectetur non repellat. Odit aspernatur minima nam exercitationem saepe perferendis. Ullam ab reiciendis earum. Nostrum deserunt consequuntur ex sapiente eveniet qui eligendi. Omnis pariatur quia. Nam minus cum occaecati magnam aliquam doloremque esse. Blanditiis distinctio ab cupiditate excepturi explicabo. Quibusdam provident totam voluptas magnam atque voluptatibus culpa. Ex esse accusantium deserunt aliquid sunt soluta odit voluptas nam. Veniam omnis rerum id corporis omnis. Asperiores provident facere natus maiores autem. Nesciunt eius voluptatibus ex quae aliquam minima accusantium. Magni expedita nulla quas. Facere voluptatum doloribus unde cumque. Dolores expedita eius vitae distinctio quod praesentium suscipit laborum. Quasi sunt corporis voluptatibus recusandae dicta.

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