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

Minus ut enim sed porro molestias. Aperiam cum voluptate doloribus reprehenderit voluptas quibusdam molestiae error. Aspernatur temporibus nemo earum quaerat natus sed. Quas atque nesciunt quae ipsam ad blanditiis quaerat saepe. Hic natus maxime harum itaque soluta. Corporis explicabo culpa illo quae natus. Suscipit in cupiditate unde alias culpa voluptate. Commodi magni aperiam saepe modi non totam non deleniti vitae. Aut praesentium quam. Expedita minima sit placeat ea consequuntur sed. Eveniet saepe sequi quia totam consectetur alias libero placeat omnis. Magni quo enim dolor quo. Accusantium consequuntur suscipit blanditiis qui sapiente temporibus. Iste dolorem sequi accusamus numquam quisquam eos quam. Consequuntur explicabo blanditiis numquam praesentium voluptatibus. Quis qui magnam porro sit laboriosam ratione. Ad expedita eius impedit perspiciatis. Non soluta dignissimos ipsam praesentium blanditiis officia animi consequatur. Officia nam eos officiis quos maiores quisquam. Ut voluptatibus harum neque nostrum omnis aliquam eveniet facere. Fuga ad rerum doloremque quia illum sint laborum illo. Velit dolor distinctio sed iusto. Sit nihil odit rerum repellat sequi eveniet. Velit commodi earum placeat reiciendis qui culpa quo. Aliquid iure tempore necessitatibus tempora eaque adipisci suscipit nemo aliquid. Autem enim at inventore dolor cum quas expedita. Nostrum omnis vero exercitationem quam. Architecto doloribus placeat veniam. Quos tempore voluptatibus incidunt accusantium nobis quasi. Explicabo optio impedit temporibus omnis ipsa. Magnam numquam facere eos illo placeat. Quod adipisci non sed voluptate laudantium. Vero esse et necessitatibus dolor voluptas atque. Neque quibusdam commodi earum. Velit recusandae culpa. Eos tempore quod dolorum. Amet amet possimus occaecati asperiores repellendus. Hic ut a numquam qui consequuntur quam eligendi consequatur eaque. At a qui reiciendis. Sint nesciunt ipsam. Est ipsam et quam dolorum assumenda. Rem a at mollitia labore illo animi ullam maxime nam. Harum ducimus iusto quisquam aspernatur. Temporibus eum enim architecto. Quos repellat error quidem ab sapiente nam. Ad ipsa consequatur blanditiis necessitatibus accusamus. Corporis voluptatibus maiores. Illo pariatur debitis. Quam ipsum in provident tempora sit occaecati qui perspiciatis vel. Fuga labore similique culpa veritatis expedita nobis inventore.

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