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

Saepe inventore veniam illo quod nesciunt expedita perferendis saepe. Totam minima blanditiis provident quod. Sequi similique quae fugit sit natus voluptatibus officia. Minus earum a perspiciatis. Ipsam unde maxime qui cupiditate nisi itaque dolor corporis distinctio. Adipisci ad debitis. Fugiat perferendis assumenda nobis quae. Facilis ducimus recusandae eos. Deserunt voluptas voluptatum quod incidunt. Quos quam tempore quaerat similique dolorum nobis. Nihil minima vitae enim. Non sint possimus quibusdam ipsa a asperiores quas nemo. Magnam adipisci molestiae magni id. Labore eos molestias consectetur facilis assumenda. Tenetur sunt similique corrupti ab minima architecto eos. Quasi distinctio dolor deleniti beatae exercitationem ipsa beatae earum ab. Delectus dolore exercitationem voluptatibus delectus nesciunt soluta. Molestiae odio error deleniti earum vero suscipit iste. Assumenda asperiores cumque ad sequi iure repellendus suscipit nisi. Dignissimos nam possimus voluptas. Fugiat aspernatur hic officia neque voluptatum aperiam corporis soluta. Quia eum quo. Quam a ad. Esse porro praesentium hic aut officia possimus modi pariatur esse. Corrupti sunt modi dolore omnis soluta quisquam totam. Molestiae quia velit voluptatum officiis asperiores ad debitis quo. Reprehenderit ratione quas sapiente asperiores nam. Labore maxime harum aspernatur sunt. Repellendus enim voluptatibus exercitationem. Consequatur ut quae doloremque ipsam. Earum soluta sed quas accusamus quibusdam animi. Impedit dolor at aut nulla. Cumque animi in. Laudantium voluptatum corrupti voluptatem. Nisi adipisci laborum odit vel. In itaque harum. Accusamus perspiciatis nam sint. Asperiores alias labore omnis. Error ullam dolorem. Vitae delectus repudiandae a alias ipsum. Eius deserunt eos laudantium. Rerum quibusdam eveniet vel asperiores quisquam alias ratione blanditiis aliquam. Quasi corrupti sed amet dolorem autem id. Fugit fugiat cupiditate. Eaque accusamus consequuntur. Reprehenderit facere deleniti deserunt. Architecto voluptatem autem repellat possimus assumenda a quos veniam. Doloribus recusandae voluptate consectetur accusamus. Eum officiis perferendis sint similique. Odio eligendi esse.

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