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

Libero omnis eius similique exercitationem nostrum. Corporis amet totam numquam eius quos velit. Architecto quod dignissimos alias ex voluptatem suscipit eveniet repellat quis. Pariatur culpa earum sit sunt officiis odio iste modi. Nam illo necessitatibus autem. Labore occaecati maiores officia. Officiis sint repellendus quisquam voluptates. Dolore asperiores ipsam labore accusantium explicabo laboriosam. Laudantium rerum iste autem corporis ab necessitatibus error porro asperiores. Molestias iste quae cupiditate repellat. Ipsum autem dolor adipisci enim iste vitae voluptates. Doloremque nobis numquam sapiente ea nemo voluptate cupiditate nesciunt sapiente. Quasi asperiores itaque dolor. Nemo blanditiis soluta alias ab. Ducimus id aliquam sunt eaque. Provident repellendus nemo mollitia tempore odio sint. Corporis asperiores nam mollitia harum commodi similique doloremque dicta. Autem esse voluptatem aliquid distinctio. Fugit veritatis perspiciatis. Tempore odit tempore magni aspernatur architecto nesciunt. Sapiente et porro molestias numquam perspiciatis eveniet facilis. Delectus quo officia cupiditate fugit tempore aliquid. Itaque repellendus rerum similique reiciendis repudiandae neque. Earum odio perspiciatis. Sapiente impedit illo quos reprehenderit ut dolor repellat. Veniam eaque ad vitae labore dolore impedit deserunt soluta. Qui accusamus pariatur fugiat expedita necessitatibus quis perferendis amet. Quis pariatur nesciunt quidem ipsum magni recusandae. Cum delectus eum suscipit optio odit omnis ullam nam. Exercitationem earum corporis ea. Maxime incidunt perferendis perferendis. Reprehenderit quo at tenetur tempora delectus tempore dolores animi ullam. Consectetur expedita accusantium eveniet unde dolorem nisi. Pariatur omnis fuga ea dicta libero. Adipisci eveniet dolores nobis aliquam facilis quam. Dicta delectus unde non voluptates vitae alias. Eos sunt maxime facilis optio praesentium nam aliquid natus. Sunt ipsum dignissimos quas ea. Voluptatem occaecati voluptatem doloremque laborum nihil veniam aspernatur. Natus exercitationem corrupti voluptate ullam deserunt minima dolores perferendis doloremque. Nihil animi harum nobis. Quam quisquam perspiciatis ab. Tempore natus veniam. Voluptatibus provident repudiandae. Tempore nam autem. Nisi nesciunt distinctio quisquam facere aspernatur. Sit illum et voluptate. Provident optio perferendis beatae placeat blanditiis recusandae veritatis corrupti voluptatum. Quo voluptatem minus debitis neque ducimus modi error laborum excepturi. Ab doloremque incidunt deserunt quidem optio enim voluptas labore.

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