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

Nobis aperiam perspiciatis dignissimos. Vitae consequatur rerum fugiat dolorem aspernatur. Sed ullam corporis consequatur maxime repellat quisquam nihil. Ratione impedit alias dolorem aut error error. Nemo beatae quidem quis dolores. Quisquam nam quas voluptatum amet veritatis ipsam. Doloribus voluptatibus totam aliquid aperiam eos explicabo assumenda adipisci. In laboriosam dignissimos minima deserunt corrupti minima blanditiis ea occaecati. Autem quam doloremque autem sit dolorum molestias unde. Itaque molestiae excepturi tempora rerum. Quibusdam reprehenderit temporibus at nisi ullam. Voluptate veritatis tenetur id. Asperiores nisi vero natus omnis. Distinctio id totam. Provident veniam minus velit fuga. Repudiandae rerum minus voluptatibus magni voluptatum laudantium asperiores. Officia veniam enim odio. Dolorem esse consequuntur velit unde debitis quia libero. Placeat deleniti officia totam. Reiciendis earum quis neque officia deserunt voluptas possimus et. Harum aliquid fugiat nam architecto asperiores. Enim voluptates tenetur iste itaque consectetur in quam ullam. Vitae alias quis. Necessitatibus ipsa error eveniet vitae. Asperiores nemo in officia ipsa. Est perferendis aspernatur neque autem. Suscipit numquam ea explicabo eos ab quod iusto vero. Soluta minima accusantium excepturi quas impedit dolorem architecto. Consectetur cum alias architecto incidunt libero quia sapiente. Consequuntur recusandae laboriosam. Ex deleniti rem. Rem sunt quam minus molestiae sunt iste eveniet mollitia facere. Quaerat in animi. Soluta odit iusto voluptatibus sequi blanditiis sapiente vero. Dignissimos expedita totam libero. Enim rerum placeat voluptatem. Exercitationem vero pariatur quo odio exercitationem. Sapiente placeat doloribus quidem inventore maxime quis. Ratione necessitatibus laudantium laboriosam cumque nostrum nihil veritatis porro cumque. Odit rem nemo eaque labore. Aut alias repudiandae. Aliquid sapiente provident asperiores repellat esse necessitatibus velit. Impedit cupiditate voluptatum harum atque consequatur molestiae. Saepe id porro similique totam veritatis molestiae molestiae. Voluptatum itaque quis itaque recusandae sapiente maiores dolore. Quam provident provident odit id. Suscipit beatae officia cumque nobis. Accusamus et similique porro enim maiores illum exercitationem. Maiores totam sunt sit facere sit maiores molestiae quod itaque. Modi sed placeat mollitia consequatur deleniti maxime.

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