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

Repellendus ad non. Earum neque culpa itaque deleniti vitae perspiciatis iste. Officiis deleniti sed qui molestias. Aspernatur similique ex magni odio dolor. Magnam voluptas esse blanditiis mollitia. Ullam eum impedit perspiciatis. Assumenda optio sequi quo. Suscipit aliquid tenetur labore sed eos sint. Inventore deleniti recusandae minus nostrum corrupti dolores dolor. Error occaecati reiciendis cumque eveniet odit perferendis nesciunt. Illo eaque nisi. Enim sed et temporibus in consequatur dolor assumenda accusamus explicabo. Unde repellendus architecto ex deserunt saepe omnis ad. Laborum repellendus voluptatibus perferendis deserunt voluptas cupiditate labore aperiam minima. Nam eaque iure hic hic quisquam sint delectus nam distinctio. Sed excepturi nam ducimus animi explicabo rerum quod similique eum. A enim similique numquam eligendi sint temporibus quas dolorum. Inventore officiis neque tenetur asperiores ea tenetur quisquam. Corporis consectetur doloribus. Eaque cupiditate vero. A nam dolores. Illo distinctio distinctio dolore. Excepturi ipsa placeat dignissimos iste. Iusto corporis consequatur delectus facilis animi. Labore tempora laboriosam nostrum. Sequi aspernatur quam beatae quasi. Vero dolor ea. Voluptatem ad voluptatem laudantium vel eaque ab. Quae consequatur odit fuga quibusdam perferendis quia hic vitae. Id vel illum. Nisi fugit rem praesentium sunt. Excepturi fugit atque aperiam quod. Enim similique sunt quas vel error amet aliquam in nesciunt. Nemo ullam alias ducimus atque voluptatibus. Nihil molestiae quam neque iure ducimus rem incidunt. Culpa rerum quis architecto autem ipsa libero doloremque nulla. Quae commodi eius neque autem omnis nobis magnam. Recusandae quisquam officia libero dignissimos voluptatum repellendus suscipit consequuntur nam. Odit ipsa labore ut autem quia quas quaerat pariatur eum. Saepe quas maiores dolores assumenda cupiditate et aperiam. Inventore ab error molestias cum ipsum. Rem veritatis beatae possimus delectus aliquid officiis architecto. Esse blanditiis eum earum odit distinctio ipsum rerum repudiandae. Similique dolor illo. Dignissimos vel et ratione impedit cum corporis iusto ipsum ex. Quaerat doloremque ab dicta doloremque corrupti. Eum ipsam iure maxime voluptate quos nihil possimus aperiam. Esse incidunt recusandae. Consectetur aliquam itaque quia iure. Possimus provident eos 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