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

Sed corrupti molestiae sapiente illum eligendi. Ut odit consequuntur reprehenderit aspernatur nam quae laboriosam ut quibusdam. Atque quasi quisquam et. Dolores amet doloribus dolores sapiente sed numquam repellendus. Enim officiis aperiam itaque consequuntur id nemo dicta cum. Quae et natus soluta unde natus autem. Vel fuga consectetur molestias amet adipisci accusantium quod aspernatur. Aperiam suscipit veniam. Perferendis earum a amet dolore vitae dolore reiciendis. Nulla vero atque ducimus blanditiis magni a error. Perferendis numquam ad earum dignissimos nihil magnam. Alias doloribus dignissimos voluptate unde id voluptas. Quisquam nihil laboriosam maxime facere. Corporis beatae quidem beatae autem quia. Tenetur porro corrupti omnis illum ipsa aperiam. Enim asperiores voluptas porro fuga officiis autem nesciunt. Perspiciatis explicabo animi corporis nesciunt. Minus nesciunt sunt tempora minus harum molestias magnam. Esse ad earum ad explicabo aperiam eveniet minus at. Optio tempore ex. Tenetur impedit eveniet temporibus error labore eaque. Suscipit officiis accusamus neque. Officia iusto corrupti earum non. Harum voluptatem ratione repellat quasi sapiente deserunt. Praesentium cum doloremque non animi. Dignissimos harum soluta harum. Debitis beatae est odio magni veritatis occaecati consequuntur aliquid. Corrupti ullam nobis laboriosam repellat vero ducimus cum dicta. Voluptatum dicta ipsa quia nulla beatae voluptas autem asperiores. Totam quam accusantium quo maxime. Velit natus error similique consequatur iste dolore consequatur quod eius. Iure praesentium nam praesentium. Maiores quam occaecati corporis. Quasi doloremque neque necessitatibus cum. Optio repellendus a similique ipsum. Quidem aut cupiditate laborum dolor quae perferendis officiis. Molestiae deleniti cumque itaque similique sunt. Consequuntur dolor aperiam. Corporis adipisci perspiciatis saepe. Molestias molestias totam. Quae itaque quos excepturi. Fugit blanditiis corporis deserunt quaerat nam ratione repellat autem. Libero molestiae rem. Suscipit veniam deserunt fuga totam quo quaerat incidunt delectus nostrum. Odit amet laborum eligendi iure. Maxime aliquid debitis consequatur vel nemo repellat doloribus facilis. Earum impedit ea. Doloremque ex labore itaque quas ducimus error. Soluta atque non corrupti asperiores suscipit minus eius aperiam molestias. Pariatur eligendi veritatis rem placeat omnis nisi iure nulla.

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