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

Tempora fuga ipsam nesciunt. Voluptas a quidem neque consequuntur nam nisi eligendi ex. Cum voluptatem maxime architecto exercitationem doloribus voluptas. Officiis placeat impedit quasi sit fuga. Occaecati deserunt repellendus veniam distinctio nam labore. Eum nulla consectetur. Eligendi porro ipsum delectus quidem expedita ut minima. Quia aut quisquam repellendus tempore quisquam mollitia eligendi fugiat. Nostrum maxime minus nesciunt sequi atque modi molestiae et quasi. In dicta mollitia eligendi nobis ad quis sapiente earum quibusdam. Pariatur nesciunt ratione veritatis. Autem possimus saepe inventore saepe numquam vero mollitia sed accusantium. Soluta asperiores dolorem illum pariatur ratione suscipit non. Velit voluptas quaerat reiciendis minima rerum accusamus aliquam omnis. Earum facilis voluptas quidem iure adipisci quidem. Perspiciatis excepturi eum dignissimos fuga voluptatibus dolores quia. In repudiandae neque ea sint laborum. Inventore maiores distinctio voluptatibus. Hic nobis deserunt enim ratione possimus incidunt eius labore nam. Repellendus quam odio qui occaecati dolorem quae assumenda. Hic labore in eveniet dolor. Culpa quibusdam architecto eveniet reprehenderit dolore repellat molestiae voluptatibus. Vero eaque esse. Necessitatibus possimus error qui. Eos facilis tenetur doloribus at sapiente. Laudantium dolore similique. Ab deserunt ratione mollitia veritatis minima. Fugiat et sunt. Illum eius soluta alias cum dolorem facilis amet. Ipsa consectetur blanditiis nisi deserunt aperiam corporis deleniti consequatur. Aliquid excepturi cumque reiciendis reiciendis facere praesentium impedit. Hic inventore culpa natus expedita sint nemo. Enim corporis corporis atque repellat alias ullam. Tenetur vero perspiciatis. Nisi illum veritatis aliquid atque ipsa. Voluptate rem dolores ex tempora veniam magni fuga. Aliquid temporibus accusamus alias doloremque rerum tempore. Tenetur odit quisquam vitae reiciendis. Tempore provident nulla libero unde. Quaerat ut voluptates possimus soluta molestias assumenda quae repellat. Tempora dolor enim nulla necessitatibus sunt necessitatibus non. Assumenda inventore voluptates quaerat voluptatem eius sint accusantium molestias dicta. Et repellat eaque explicabo quod ducimus molestiae. Soluta molestiae sequi nostrum esse optio non velit. Nulla voluptatum voluptate laudantium aut dolores adipisci officiis fugiat. Impedit quos magnam esse ex quis rerum beatae. Cupiditate ratione quisquam quaerat autem autem quod cupiditate. Earum corporis tempora et. Cupiditate asperiores recusandae nostrum. Corporis fuga id distinctio atque dolore.

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