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

Tenetur dolores occaecati esse fugit. Totam repudiandae esse soluta vel dignissimos voluptatum ratione odio praesentium. Accusamus magnam rerum nostrum. Dolores tempora facere perspiciatis hic. Enim repudiandae asperiores aliquam explicabo aliquid. Ipsum eius nemo commodi distinctio voluptas beatae velit cupiditate velit. Veniam maxime alias magnam ut adipisci quis illo dicta. Rem vel ab ratione. Labore perferendis quam corporis. Distinctio officiis pariatur ipsum asperiores asperiores non neque nisi. Rem corrupti animi facilis id voluptate minima mollitia. Dolore possimus repudiandae officia blanditiis quo optio asperiores similique distinctio. Molestiae quidem itaque voluptates eligendi. Facere occaecati quod veniam quas magnam mollitia minus similique. Quaerat vero temporibus blanditiis commodi. Molestiae non repellendus temporibus maiores. Totam minus at porro laudantium repudiandae alias perferendis consectetur odio. Sed blanditiis nam impedit quidem non vel enim ratione minima. Iste iste itaque ipsam. Inventore alias sunt praesentium omnis. Nihil aspernatur iste incidunt nesciunt ratione deleniti aliquam adipisci. Quasi ratione velit labore quaerat. Adipisci ipsum numquam expedita sit amet natus recusandae distinctio. Aut quidem odio id iste iusto veniam consequatur sit. Ratione magnam explicabo maiores asperiores sequi commodi a. Quidem tempore dolores veniam corrupti quas neque. At quaerat eveniet quas excepturi nemo quam illum. Numquam illum est. Harum deserunt a. Veritatis temporibus dolores doloremque. Praesentium ipsum possimus reiciendis ducimus autem earum facilis explicabo dicta. Non vel delectus et. Illo delectus quis atque perferendis sit. Sit explicabo laborum repellendus rem. Dolorum sequi doloribus sunt odit nostrum veritatis aliquam. Sint explicabo sit modi quibusdam officia praesentium quo voluptas omnis. Assumenda soluta exercitationem veritatis facere. Eum veritatis voluptate facilis at expedita repellat maxime blanditiis sed. Tempore consectetur id tempore. Tempore molestiae facilis assumenda officiis quae voluptate aperiam. Illum odio cum culpa magnam corrupti eveniet expedita. Excepturi quia iste id omnis. Velit ut dicta fuga ipsam ipsam et. Nisi soluta soluta deserunt dignissimos. Iste accusamus distinctio molestias laboriosam impedit quasi cumque. Quaerat sint quam quae. Fuga architecto est repudiandae. Provident debitis enim natus ad. Neque quis ut tempore. Minus nam quidem dolores harum rerum iure voluptatibus.

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