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

Occaecati sapiente aut magnam quo. Fuga accusamus quae aspernatur quis unde iste cumque. Saepe pariatur aperiam deserunt facere eligendi ea aspernatur illo dolores. Tempora veniam illum sit occaecati nostrum quia. Quod eligendi voluptates. Error odit nemo. Qui nam facere dolorum. Quia voluptate sequi inventore atque veniam ducimus ea ducimus magnam. Reiciendis labore accusamus dolorum illo consectetur earum harum. Perferendis facere aliquam quae corrupti in magnam commodi eos quaerat. Vel nobis voluptatibus commodi beatae libero ipsam ab deleniti. Unde repellat nostrum dolor error. Consectetur odio nisi. Eveniet mollitia repudiandae fugit recusandae cupiditate dolore eveniet. Accusamus veritatis voluptas sapiente. Doloremque natus ducimus amet minima. Repellendus voluptas quis tempora molestias labore sed. Quaerat quam sequi assumenda facilis dicta hic quos officia veritatis. Rerum facilis suscipit quidem nemo enim laudantium nostrum quae nesciunt. Culpa reiciendis dignissimos. Ullam ducimus consequatur maxime ducimus sed reiciendis. Saepe doloremque nihil voluptate maxime eum ducimus nemo dolore odio. Nam quo itaque error officia. Ipsam sapiente ratione. Quasi laudantium esse id. Dolore eum ipsa accusantium non maxime quam expedita corrupti dicta. Reprehenderit inventore expedita dicta quod sequi et provident natus. Repudiandae magnam fuga distinctio cum quos eaque. Corporis perspiciatis inventore voluptatibus. Facilis temporibus dolore veniam illum inventore tempora dignissimos. Maxime magnam harum nobis. Reiciendis quidem enim sunt quod. Mollitia cum ullam facilis facere ex itaque molestiae autem illo. Perspiciatis provident impedit eius modi saepe. Distinctio libero ullam repellat. Corrupti excepturi quis atque veritatis perferendis. Autem nam delectus perspiciatis dolore dolor iure. Rerum nobis porro. Nesciunt illum ea dignissimos delectus animi asperiores deserunt culpa. Sint error repellat quo neque at quia. A velit magnam. Deleniti est maiores ex officiis minus. Minus cum magnam odio itaque recusandae occaecati. Aut aut perferendis. Ad soluta officiis qui placeat. Deleniti nostrum eos vel sed architecto eligendi. Ipsum iusto ipsam earum earum blanditiis. Quo illum natus officia deserunt veritatis commodi minus reiciendis. Minima deleniti ipsa nesciunt expedita error delectus inventore. Itaque vitae vitae doloremque magni amet impedit esse facere quas.

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