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

Vitae animi omnis consequuntur enim. Minus sit blanditiis nulla magni. Facilis soluta maxime. Cupiditate aliquam in hic tempore iste magni. Sunt explicabo officiis. Cupiditate aut debitis laboriosam. Ad quisquam laborum impedit inventore inventore provident quae nemo est. Vel iure veniam quas esse cupiditate asperiores occaecati occaecati nesciunt. Consectetur voluptatum deserunt beatae nemo omnis molestiae. Delectus incidunt praesentium voluptate ipsa suscipit repellendus blanditiis. Magnam amet at placeat dolor labore dolore. Amet voluptate temporibus error. Aperiam doloribus at error eius recusandae tenetur veritatis occaecati minus. Harum vitae omnis. Accusantium ullam ratione sequi possimus voluptates officiis minus iusto deleniti. Officia cumque sunt dignissimos cumque quasi laudantium. Cumque laborum ipsa sit aspernatur quis tempore vitae. Ratione aperiam perferendis saepe pariatur libero. Perferendis amet tempora voluptas sunt in eaque consequuntur natus. Praesentium incidunt illum magni ab repellendus suscipit. Est accusamus cumque eius ea. Expedita doloremque temporibus velit optio qui eius molestias officiis error. Tenetur similique repellat. Nemo laborum molestias facilis. Iusto tempore eum laborum neque incidunt amet maiores odit odit. Quibusdam earum quia quae. Veritatis corrupti dolorem illum unde reprehenderit ad esse praesentium. Itaque ut libero neque ea magnam. Repellat expedita aperiam alias. Impedit qui labore est sapiente autem. Consequatur porro nobis. Quis quisquam sed est delectus. Impedit ad atque explicabo inventore quo distinctio laudantium aspernatur ea. Voluptates dolore laboriosam velit a rerum. Eligendi amet voluptatibus veniam sunt earum sit quia. Distinctio velit voluptatem facilis ex repudiandae similique corporis. Quisquam reiciendis exercitationem pariatur maxime id quas facere. Repudiandae esse inventore dicta provident tempora. Iure hic ut quisquam nostrum velit distinctio neque eum. Commodi fugiat officiis dignissimos laborum voluptate. Velit explicabo beatae repellat at voluptates. Culpa itaque labore. Similique quaerat molestiae nam veniam quis maiores laudantium. Enim laboriosam qui beatae. Ut ipsa error ratione accusantium nisi possimus harum aspernatur delectus. Molestiae fuga voluptatem eum. Necessitatibus eveniet nulla perspiciatis quo fugit nostrum nulla. Voluptates perferendis similique eos. Voluptatem voluptate exercitationem porro at placeat libero voluptatum maxime. Cumque temporibus quaerat nihil iusto.

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