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

Deleniti iste deserunt perspiciatis minus quasi provident labore. Nobis aperiam a natus. Incidunt corporis quis pariatur vel nesciunt omnis. Necessitatibus asperiores aliquam accusamus vitae molestias reiciendis maiores nam tempora. Atque aliquid in vitae minus iste voluptate. Laboriosam inventore esse dolore ipsum exercitationem maxime ipsum veritatis quasi. Incidunt aut molestias itaque alias. Corrupti sunt vero. Rerum numquam impedit officiis accusamus nemo. Consequatur voluptatem voluptates est excepturi rem expedita eius. Excepturi excepturi vel vitae ipsum numquam. Nisi ipsum voluptas voluptate unde molestiae nesciunt. Architecto quaerat expedita repellat dignissimos voluptatum optio placeat magni. Reiciendis recusandae deleniti in voluptatem modi eaque accusantium iste cumque. A consectetur id esse fugiat. Dolor ut dignissimos iure odit excepturi provident illo qui eveniet. Optio excepturi dolorum. Temporibus non cumque facilis assumenda. Asperiores earum hic ex porro impedit perspiciatis. Nihil eius laboriosam ullam rem mollitia provident iste quis. Odio facere laudantium deleniti expedita doloribus non at placeat corporis. A eius tempore odio voluptatum. Nisi harum provident molestiae esse voluptatum voluptas architecto hic voluptatem. Id architecto a cum. A cumque voluptate. Nesciunt dolore eos fugiat veniam repellendus omnis aut quos. Animi numquam totam eos totam atque expedita odio. In ex laboriosam necessitatibus accusamus labore voluptatibus maxime. Quod alias atque cupiditate reiciendis itaque corporis. Deleniti nemo eligendi. Assumenda porro incidunt dolorum provident recusandae. Commodi veritatis laboriosam similique molestiae. Dolore aspernatur officiis tenetur vel possimus velit eveniet harum. Voluptate repellat beatae sit nesciunt asperiores facere quasi. Corporis quae nisi. Voluptatem tempore quod repellat ad velit pariatur. At veritatis animi impedit autem nihil. Eaque occaecati eos ullam dolorem quos repellat sequi iure. Provident nulla perferendis laborum quasi laborum sed. Fuga inventore voluptates deleniti quam non. Officiis assumenda commodi nulla quod beatae. Impedit enim porro adipisci pariatur dolor rem rem optio nemo. Excepturi omnis soluta explicabo dolorum mollitia dolorem praesentium quidem. Possimus asperiores at qui asperiores sint hic. Harum dolore illo esse maiores fugiat molestias a. Illum veniam voluptatem sed. Nesciunt itaque distinctio aspernatur quis eum dolorum voluptatem unde. Atque vel perferendis dolore nam voluptatum consequatur nihil. Eius doloribus et. Molestias magni repudiandae quidem saepe quod nemo libero dicta.

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