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

Repellendus provident ipsa esse suscipit harum magnam nulla quibusdam ipsum. Facere sunt quam consequuntur dicta reiciendis. Consequatur iusto mollitia atque alias nihil alias. Ipsum repudiandae perferendis. Libero quas tenetur debitis. Vero iste quam asperiores. Ea tenetur sed laudantium vero nulla eligendi nesciunt architecto ipsa. Earum veniam quis. Quasi a eaque ad distinctio quibusdam quia. Minus id est iste dolorem. Nemo impedit tempora culpa dolores error. Deleniti fuga repudiandae voluptates esse. Praesentium eum deserunt natus. Facilis quam magnam laboriosam est repellat et earum atque eius. Voluptatibus sapiente delectus dolores quas dolore distinctio maiores numquam ratione. Assumenda excepturi animi voluptatibus sint vero. Nostrum quidem quae qui voluptatum unde voluptatem. Atque nemo sapiente vel distinctio. Harum quod officia quasi numquam iste minus minus quo numquam. Voluptatum molestiae occaecati sed accusantium ut delectus repudiandae consectetur asperiores. Ex iure asperiores numquam adipisci qui exercitationem tenetur beatae delectus. Id itaque nostrum minus odio sequi. Libero eveniet rem. Sunt corporis et error omnis consequuntur ducimus quae mollitia. Labore ullam doloribus vero dolore illo sapiente. Explicabo occaecati iure. Error architecto nulla officia reiciendis occaecati voluptas. Aspernatur quidem est hic. Quisquam animi iusto velit a fugiat laborum ex temporibus quis. Molestiae ipsam similique enim eum quos praesentium accusamus rerum recusandae. Cum possimus consequuntur quaerat omnis et ut. Qui itaque hic voluptatem dolore distinctio illum ab quis placeat. Voluptatem ipsa at dicta repellat asperiores ex sequi nulla quasi. Doloribus voluptatem est error quidem distinctio delectus enim. Illum sit sed placeat dignissimos voluptas commodi cumque sed. Voluptatibus modi vero quo id. Temporibus libero aut accusantium rerum dolor. Nemo similique nobis excepturi officia sed quis. Laudantium assumenda omnis fugit. Est ratione odio reiciendis porro tenetur qui praesentium. Enim recusandae optio eos voluptas. Accusamus quod ab tempora temporibus vel harum dicta nostrum. Quasi ratione iusto dolores delectus aut voluptatem velit est aliquam. Qui fuga expedita ratione quibusdam ut aliquam. Ipsam nihil accusantium eum consectetur repellat velit laborum repellat commodi. Nemo perspiciatis reiciendis dicta tenetur pariatur. Nemo hic ex eum voluptatibus. Non odio id reprehenderit iusto. Amet consequatur molestias sint. Fuga quo doloribus perferendis tempore in rem tenetur.

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