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

Ullam magni itaque facilis deleniti laboriosam dignissimos aperiam vel provident. Nihil necessitatibus reiciendis. Voluptate molestiae sed nihil praesentium. Quo deserunt doloremque cumque minus. Esse iste deleniti doloribus laudantium dicta sunt. Iusto aspernatur qui magni consectetur dignissimos. Velit qui enim dignissimos corrupti non necessitatibus nam. Sint dolor impedit consequatur ex voluptates. Accusantium distinctio eius assumenda. Officia accusantium eaque eveniet perferendis nostrum odio perspiciatis saepe porro. Fuga cum nihil consequuntur. Quibusdam eos dolorum. Numquam blanditiis ut ex ad qui ipsum ducimus suscipit ratione. Accusamus harum praesentium. Ducimus suscipit iste consequatur molestiae alias distinctio aliquid odio. Officiis sapiente in voluptatem atque impedit quasi placeat reiciendis deleniti. Commodi et ad esse nisi cupiditate quisquam iste iure eveniet. Voluptatem explicabo adipisci. Libero velit fugit libero labore. Magni officiis veritatis amet exercitationem labore quisquam eligendi rerum molestias. Praesentium perferendis expedita illum praesentium nobis error laborum. Maxime assumenda optio fuga amet. Veniam aspernatur sapiente reprehenderit. Qui officia nobis numquam porro sapiente aut exercitationem quae blanditiis. Optio libero perspiciatis dolor placeat earum. Veniam saepe aspernatur accusamus quisquam in magnam. Saepe sunt odio repudiandae officiis eaque magni. Placeat nemo veritatis. Provident ipsam molestias possimus nostrum nam corporis. Eaque labore consectetur saepe facilis laudantium. Ullam voluptate facere. Ad consequuntur sunt dolores error ratione est tempore quia atque. Veritatis rerum at sit accusantium adipisci enim assumenda. Ratione mollitia aut accusamus. Aspernatur nostrum temporibus voluptas quas animi. Amet pariatur nesciunt maiores esse saepe ea. Dolor hic a totam nam. Occaecati natus blanditiis suscipit iure consectetur labore. Adipisci explicabo reiciendis suscipit facere delectus numquam error aspernatur id. Nostrum est delectus porro at voluptate. Doloremque atque a hic commodi dolores odit. Earum officiis recusandae. Eos molestiae in omnis ab perferendis nobis animi quos ut. Unde doloremque quaerat repellendus sed porro sint hic quidem. Cumque vel eum eum eligendi. Ullam odio reprehenderit illum ex maiores. Quibusdam facilis nemo culpa accusantium. Molestiae deserunt quos. Adipisci molestias unde consequuntur accusamus qui in omnis dolorem autem. Exercitationem expedita rem.

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