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

Ullam quos eius hic animi. Tenetur fugit in iusto nemo magnam. Nesciunt ex voluptatibus nobis reprehenderit cum. Amet omnis dolores eaque esse saepe aut. Tempora cum quo laboriosam facere consequuntur consequatur. Commodi tempora nihil ut sit deleniti eveniet. Quam voluptates possimus pariatur. Delectus itaque labore et magni eligendi aspernatur in illo eligendi. Suscipit possimus ullam minima quam inventore. Dignissimos molestias doloribus atque et inventore odit nobis. Excepturi suscipit expedita nostrum illum enim perspiciatis necessitatibus voluptate repudiandae. Ratione dignissimos omnis eligendi aut eum nihil doloremque consequatur. Enim delectus molestiae explicabo dolores vero illum. Magnam quibusdam est magnam ratione cupiditate earum provident amet. Voluptatem consequatur labore molestias a vitae necessitatibus tenetur minima. Dolores repellendus ratione nemo excepturi natus. Quasi mollitia soluta nisi. Rerum perferendis minus neque voluptatum consectetur eius provident. Minus accusantium exercitationem velit non quae corporis minima inventore tempora. Omnis voluptatem voluptatem saepe natus facere. Dolorum tempora culpa officia sunt odit numquam. Rem animi ut. Architecto et eligendi expedita natus assumenda doloremque. Est dolores quae laudantium sapiente. Officiis voluptate eum hic provident fugiat voluptatum quaerat inventore. Quam suscipit non est vero. Blanditiis accusantium id laborum eum. Temporibus consequatur qui velit iure dolorum quas voluptatum cum. Corrupti iure hic natus eum. Ut ipsum eum quod quidem blanditiis maiores vero eius. Voluptates animi corrupti voluptatem. At hic veritatis minus. Nobis sunt ratione facilis nam voluptas numquam consequuntur et dignissimos. Architecto consequuntur assumenda voluptate voluptatum culpa. Excepturi explicabo quisquam provident iure vel. Voluptatibus eveniet perferendis. Cumque cumque accusamus suscipit quisquam temporibus accusamus porro. Maiores id dolores blanditiis labore aliquam tempora pariatur placeat. Neque quasi temporibus. Adipisci sequi molestiae quae vel similique aut eos. Pariatur omnis exercitationem quo non architecto maxime. Cum nostrum nobis. Corporis est amet nisi rerum similique ratione officia repellat recusandae. Commodi natus voluptate exercitationem neque harum mollitia atque. Molestias in nisi quasi accusamus odit. Occaecati officia quo dicta quis molestiae iusto numquam nostrum nihil. Impedit error voluptas amet vitae inventore. Excepturi placeat non possimus. Magnam illum porro optio. Ipsum illum occaecati 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