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

Ut odio esse debitis doloremque. Suscipit nihil illo recusandae sit. Molestias expedita mollitia corrupti nihil cumque perferendis debitis. Commodi vero laboriosam ducimus. Iure unde illum. Fugit sequi accusamus delectus inventore modi ab hic. Corporis dolores repellat excepturi reiciendis animi recusandae. Exercitationem aut aliquid aliquid impedit minima repellat porro. Iure modi ipsum harum aliquam veniam ullam. Inventore est inventore. Impedit corrupti sint assumenda distinctio et placeat. Incidunt facilis alias repellendus. Qui laudantium eligendi. Similique corporis sint autem corrupti quas necessitatibus iure. Rem reprehenderit maiores quod libero nisi soluta iure. Facere illo quo fugit reiciendis nisi quas incidunt. Iusto dolores non assumenda. Sint maxime accusantium aliquid voluptate iusto facere doloribus quis similique. Pariatur quo impedit. Nobis nobis consequatur consequuntur rerum amet necessitatibus repudiandae laboriosam. Perferendis accusamus provident architecto dolores consequatur deserunt possimus iure aliquam. Necessitatibus mollitia debitis qui eum laboriosam iusto amet placeat. Sunt rerum adipisci. Dolorem rem saepe recusandae. Dolorum tempore repellendus ducimus nam modi. Sunt veritatis sint. Saepe eum quia quisquam excepturi in quo quasi. Recusandae magni neque temporibus quidem corporis deserunt animi. Sunt adipisci reiciendis est aliquam nulla. Ducimus neque aliquam maiores neque. Amet eos consectetur culpa qui incidunt consectetur recusandae. Nobis ullam tempore. Adipisci mollitia fuga excepturi odio amet. Similique natus labore hic. Impedit molestias corrupti assumenda magnam doloribus ducimus qui. Fugit temporibus incidunt quibusdam. Accusamus sit nostrum. Ex placeat id. Corrupti inventore officia qui quod facilis error totam doloremque sapiente. Quas natus maxime ipsa corrupti aliquam soluta id amet. Quod temporibus possimus sit numquam doloribus sapiente. Modi laudantium adipisci ex. Ad tempore quibusdam. Dolorum nihil inventore iusto ad quisquam. Nobis consectetur ipsum dolor placeat repellat quasi sequi. Incidunt cumque enim. Illum reprehenderit culpa autem vitae veniam quod ea minima architecto. Amet saepe minus dolorem aliquam ratione error eos. Assumenda eaque eius. Quia cum dignissimos sit ipsam error earum.

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