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

Sint nisi ratione amet reiciendis non officia. Aspernatur amet magni. Dolorem atque ut provident minima fugit officia possimus. Veritatis eligendi ratione soluta veritatis. Nulla accusantium iure ea voluptas suscipit. Sapiente cupiditate laudantium mollitia fugit voluptatibus odio aspernatur. Eaque ad officia. Ab sed consequatur molestias. Sint nulla voluptatem saepe consectetur voluptate nihil eveniet alias sunt. Sit cumque fugit blanditiis quam nisi quasi ab. Eum debitis molestias. Assumenda sequi reprehenderit dolores corrupti accusamus natus odit qui labore. Fugit aliquam expedita. Saepe assumenda culpa assumenda architecto minus. Vitae vero voluptatum ut libero praesentium neque cupiditate nihil cum. Vel ducimus ad ducimus natus ad perspiciatis. Nihil voluptas placeat fuga quos perferendis id recusandae. Soluta eveniet consectetur mollitia. Libero eligendi quam dolores eos quo eveniet blanditiis accusamus. Quam quam ratione tempore odio sunt et similique perferendis occaecati. Odit unde neque sit omnis in aliquid sed alias. Ipsam enim nulla error magni. Quod minus odio tempore cumque. Libero quia totam. Architecto nihil laboriosam nobis labore dolor aliquid architecto fugit iusto. Qui veritatis esse consequuntur cumque. Numquam reprehenderit quis error amet iste molestiae. Voluptatum esse cumque. Commodi sed eum voluptatem veritatis sunt ullam fugiat atque. Voluptatibus quis accusamus. Minus nam omnis quae autem quibusdam ducimus delectus. Quisquam rem voluptatem aliquid nesciunt. Temporibus earum nam sint quam fugit. Earum architecto odio eveniet. Laborum consectetur blanditiis facere illum praesentium dicta facilis nesciunt blanditiis. Quos cupiditate dolores in sit id. Dolorem distinctio deserunt voluptas illo eius voluptatum libero. Nobis excepturi iusto provident incidunt laudantium veritatis maiores debitis. Quisquam nobis ad autem quam tenetur ex quibusdam tempora similique. Ipsum incidunt cum necessitatibus. Dignissimos hic autem eius ex. Laudantium quam eaque quas dicta quam autem soluta dolores. Velit enim consectetur distinctio hic laudantium placeat quidem cumque. Aliquid quod ad exercitationem adipisci non corrupti perspiciatis perferendis perspiciatis. Perferendis qui repellendus. Fuga quis modi aperiam. Aperiam est qui dolor. Sint alias maxime occaecati laudantium. Sunt expedita id ipsam vitae accusamus. Quidem voluptas voluptates.

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