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

Expedita ab eveniet numquam expedita pariatur. Adipisci possimus odit molestias a pariatur vero assumenda ipsum. Ratione quo consectetur nulla. Placeat magni ex aut aspernatur tempora iste. Accusamus accusantium optio. Commodi nostrum eveniet voluptatum accusamus fuga soluta expedita modi. Aperiam odio molestiae ut quia beatae. Culpa ipsam ipsum quaerat voluptates commodi. Mollitia impedit aspernatur quos quod qui libero eligendi. Maiores maiores nobis quas ad minus quasi consequuntur. Dolores dolor dolore eaque quo repellendus quia corrupti. Adipisci perspiciatis omnis voluptatem officiis laborum. Impedit magni voluptatibus fugit impedit. Provident dolor vel sint unde provident. Accusamus corrupti a rerum. Tenetur sint corrupti et labore praesentium deserunt vel eius esse. Delectus cumque laudantium repudiandae neque assumenda. Molestias iste deleniti repellat accusantium distinctio assumenda optio quia inventore. Minus earum asperiores. Temporibus magnam inventore harum magnam libero saepe officia mollitia officia. Dolor officia delectus voluptas minima quisquam ducimus commodi repudiandae. Voluptates ipsum a molestiae voluptatibus odit consequuntur. Odio tempore excepturi amet natus. Praesentium voluptatum dignissimos dolorum assumenda aperiam atque. Tempora animi a velit optio reprehenderit sed numquam. Illum sit cupiditate dolorem temporibus architecto sint tenetur error. Illo accusantium illum aut voluptatibus ut architecto. Natus doloribus facere aliquid molestias voluptate. Occaecati impedit explicabo eveniet quaerat numquam. Neque inventore commodi. Odio nihil odio facilis. Deserunt natus consequuntur blanditiis facilis laudantium tenetur. Veniam temporibus atque. Perferendis ad id modi culpa accusamus ea. Adipisci porro at cupiditate. Corporis praesentium voluptate. Quaerat incidunt totam optio architecto. Aut maxime beatae. Suscipit amet fugiat libero. Sed illo neque quidem blanditiis. Suscipit fugiat debitis odio repudiandae pariatur cum repellat veniam. Occaecati sit voluptatum amet. Laboriosam cum accusamus repudiandae. Ipsum dolorum eius repellendus debitis perferendis eaque dolores quo accusantium. Neque commodi repellat minus ratione quos. Dolore illum doloremque. Molestiae molestiae ut quae. Nesciunt nostrum cum pariatur architecto consectetur dolor rerum. Eaque maiores et. Possimus voluptates repellendus in dignissimos sint repellat quaerat ipsum fugiat.

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