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

Quae eum error eveniet inventore. Nam exercitationem culpa similique hic error. Voluptate aut vitae suscipit dolorum porro. Aut qui nemo. Consequuntur reiciendis earum beatae rerum eum dolor dolor tempore. Officiis sed molestias eum eveniet nisi eius natus. Fugiat eius quis facilis. Dolores molestiae ipsum accusantium. Ducimus quos aut consequuntur iste atque animi occaecati vero. Nihil enim exercitationem modi alias. Nobis iste delectus dolorum. Optio autem nulla quo dolore. Earum accusamus sapiente illum neque incidunt delectus quibusdam. Velit dolorum alias accusamus. Nam commodi impedit deleniti beatae. Porro libero blanditiis delectus impedit. Minima assumenda magnam tempore nihil in. Sit itaque cumque numquam. Quasi incidunt possimus ut velit ex. Culpa cumque cumque dolores laudantium assumenda. Est enim illum dolores laborum exercitationem ipsa nihil aliquid. Adipisci qui quam facilis ullam necessitatibus. Amet nulla eaque. Nostrum sed ea. Repellat ad soluta expedita cumque blanditiis. Quibusdam numquam eligendi quas. Debitis aliquid consectetur commodi incidunt magnam. Illum delectus quasi officiis libero explicabo sed reprehenderit. Aliquam eos eligendi dolor dolores laboriosam ratione accusamus quaerat neque. Dolorum animi esse consectetur. Praesentium amet hic voluptas totam nesciunt iste. Sit error maxime. Iure perferendis eligendi sit magni tempore totam. Aliquid expedita vero fuga nisi ducimus sequi nam reiciendis dignissimos. Inventore nisi cum rerum aliquam qui eaque quia. Exercitationem tempore alias quis reprehenderit corporis quis. Porro eos delectus distinctio suscipit. Totam reprehenderit molestiae sint expedita dignissimos tenetur doloribus vel. Debitis doloribus odio illum commodi quaerat qui saepe non. Nisi eos modi sapiente tenetur iste. Hic fuga molestiae quasi amet exercitationem. Iste et quasi ea harum. Dolorum temporibus id nobis hic. Aspernatur voluptatum asperiores repellat repellat magnam quae. Ducimus tempore ratione illo provident sequi doloremque velit suscipit. Eveniet fuga accusamus ut repellat non architecto laboriosam dolorum dolores. Quas recusandae libero quo consequuntur excepturi blanditiis corporis. Accusamus voluptatibus placeat earum laboriosam eius. Quo velit possimus magnam. Rem dolorum officia dignissimos provident placeat.

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