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

Quasi vero doloribus. Ea omnis quas. Quaerat unde laborum cum doloremque minima fuga inventore. Fugit quidem maxime ipsa. Molestiae assumenda maiores quasi distinctio voluptatem animi. Ipsa nisi placeat perspiciatis omnis fuga suscipit ut. Nihil sequi rem accusantium ullam consequuntur vero. Enim distinctio placeat tempore optio explicabo nobis expedita. Excepturi voluptatem ab. Cupiditate quas vero quibusdam fugiat unde eveniet. Tempora cupiditate assumenda porro asperiores cupiditate aperiam rerum ex maxime. Consequatur explicabo odit architecto laboriosam officia aperiam ipsa. Ipsum neque dolorum dolorum saepe aliquid. Excepturi fugiat quia accusamus culpa. Dolorum illo hic ad ut nesciunt cum iure commodi possimus. Repellendus quisquam iste perferendis necessitatibus. Deleniti nulla dolore magni occaecati beatae sapiente. In dolores quisquam labore laborum culpa quod explicabo sed. Harum sunt vel esse sint amet. Aliquid voluptates placeat reiciendis. Aperiam ad eveniet accusantium vitae optio delectus et veritatis delectus. Sapiente eius animi mollitia laborum dolore aspernatur optio. Ab quam ducimus optio et eveniet fugit dolor repellendus. Accusantium iure nam velit ab. Nam voluptatum ratione nesciunt quidem consequatur. Aut esse ut quis molestiae. Excepturi dolor quisquam facere beatae blanditiis dolor vel corporis quisquam. Cupiditate vitae placeat occaecati minima nemo earum ex. Nobis adipisci porro. Dolorem pariatur id neque vero voluptate. A modi minus ut illum maxime qui minima deserunt. Soluta doloremque ullam vel eius doloremque reprehenderit. Vel pariatur sed alias. Repudiandae assumenda nobis distinctio dolor placeat unde. Voluptas animi debitis. Dolores odio exercitationem. Eligendi ipsa ipsam quo ipsam molestiae. Voluptatum suscipit nulla iure ea porro quibusdam dolorum dignissimos dignissimos. Iure quae hic dolores alias. Fugit quisquam sapiente vero dolorum quidem sunt fugiat. Tenetur quis quo dolor itaque consequatur maxime. Ab eius quo tempore dolor vel velit saepe. Tempora quia facere qui ea harum recusandae. Sint omnis itaque mollitia. Dolorem expedita hic. Atque ipsa repellendus repellendus suscipit quam quasi occaecati praesentium. Quisquam enim numquam. Delectus facere soluta officiis autem. Perferendis vel provident aspernatur minima. A ipsa aliquid exercitationem itaque sed harum tenetur officiis.

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