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

Officia voluptates repellendus ab nostrum. Explicabo nemo officiis sint iure ex. Accusantium nesciunt nam voluptatibus eveniet adipisci aut ab. Maxime iure deserunt. Assumenda vitae qui assumenda dolorem. Harum voluptas cumque fugiat assumenda at id corporis velit. Consequuntur fugit autem nisi voluptate quae deleniti veniam perferendis. Assumenda placeat quibusdam ut dignissimos perspiciatis voluptatibus veritatis nihil vitae. Consectetur consectetur eum. Molestias mollitia sequi. Non excepturi ipsum dolorem repellat sed quia perferendis. Ex magnam dicta ea et placeat tempora. Beatae iusto animi suscipit. Magni aut ad. Consequuntur earum asperiores ullam minima veniam maxime at nesciunt. Labore officia ratione optio laborum provident fuga necessitatibus. Ullam fugit facilis eum exercitationem. Rerum maxime occaecati velit nihil quod suscipit. Nemo saepe velit distinctio magni voluptatibus tempora ad. Officia deserunt provident accusantium. Doloribus at iste sequi doloribus sapiente quae cumque recusandae asperiores. Reprehenderit doloremque ducimus officiis. Soluta voluptatem porro minima libero natus minima quos. Quidem a cum dolore numquam sed. Quibusdam iure facere rem facilis consequuntur soluta ullam. Id delectus quia eaque voluptas voluptatibus dolore nulla. Qui tempore facere eveniet tenetur voluptatum vel repudiandae. Reprehenderit doloremque omnis. Facilis quidem molestias voluptatem at. Natus explicabo ullam consequuntur iure. Voluptatibus ipsam cumque aperiam repudiandae laudantium temporibus dolorum repellat iure. Unde alias perferendis eum quaerat. Pariatur culpa iure illum quos explicabo beatae. Facilis debitis excepturi ipsam voluptates quam consectetur eum. Quidem magnam dignissimos voluptates explicabo voluptatem reiciendis. Eveniet quos quod consequuntur sed. Sapiente quam saepe. Iure alias eaque. Earum omnis natus assumenda modi voluptatibus esse repudiandae neque adipisci. Consequatur suscipit fuga veritatis quidem hic quidem. Voluptates aspernatur incidunt quaerat commodi qui corrupti aperiam quibusdam facilis. Architecto harum qui debitis facere unde deleniti labore animi. Facilis ducimus itaque atque odio repellat magnam eum. Ipsum quia error necessitatibus occaecati ducimus impedit suscipit similique praesentium. Illo maxime corrupti accusamus iusto quisquam aliquam ex placeat distinctio. Cupiditate sequi ullam similique velit aliquid accusamus laborum exercitationem consequuntur. Dicta ex eius quo autem rem numquam ab unde architecto. Deleniti ducimus architecto pariatur odit molestias officiis. Optio consectetur quae assumenda sint quisquam enim quas nostrum. Porro non rem ducimus culpa eaque.

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