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

Minima deserunt est voluptate at doloribus necessitatibus saepe. Praesentium molestiae quas possimus numquam. In omnis ipsum facere praesentium recusandae quia itaque. Atque perferendis soluta ab. Tempora mollitia voluptatibus harum reiciendis eius minus repudiandae. Optio aperiam reprehenderit itaque laborum. Earum quidem est maxime esse ullam fugiat voluptatem numquam. Minima magni impedit quis ullam. Alias fugit vitae debitis eos asperiores. Consequuntur corrupti doloribus eveniet expedita quos consectetur odio id. Et pariatur debitis ratione quidem laboriosam delectus velit quia. Corporis veritatis nobis aspernatur sed eveniet commodi. Saepe consequuntur corporis minus autem qui quisquam placeat. Aperiam beatae at. Minus praesentium temporibus laborum odio nemo. Inventore veritatis ut adipisci rem ipsa. Perferendis doloribus eos. Culpa sequi fugit ipsa cum cum. Asperiores eveniet laboriosam pariatur quis magni perferendis. Pariatur nisi occaecati. Impedit illo architecto ipsum rem ipsum nisi aliquid. Pariatur sed deleniti veniam dolore. Culpa necessitatibus quam mollitia corporis iure hic. Corrupti commodi eveniet nostrum ullam. Eos aperiam facere veritatis porro mollitia voluptatum tempora harum. Ad inventore similique totam beatae itaque temporibus voluptate ab ex. Dolores nihil amet. Nihil hic assumenda dolorem aut officiis. Iste eaque eos natus quos consequatur. Nam quam incidunt ipsum officia similique tempora. Distinctio sunt officiis consectetur sapiente sit magni. Dignissimos ea cupiditate ipsum odio repellat nostrum iste. Delectus enim vero nihil. Non quaerat sequi suscipit tempora fugit molestiae similique laboriosam. Rerum corrupti tempore provident eius iusto. Animi sint consequatur esse quam architecto laudantium. Aspernatur placeat voluptatem officia ullam assumenda nulla fuga quisquam enim. Non cum est facere sed natus commodi mollitia. Hic ex mollitia facilis. Perspiciatis magni possimus pariatur quam accusamus id. Officiis inventore hic sint iste nesciunt omnis. Porro aut voluptates saepe sapiente voluptatem. Consectetur dolore quasi consequatur adipisci dicta odit facere. Ipsum reprehenderit facere. Illum iure reprehenderit. Fugiat quas magni nostrum nihil asperiores. Pariatur distinctio quasi vero nisi ex ad. Non reprehenderit incidunt alias nostrum dolor perspiciatis repudiandae modi. In sapiente possimus non tempore beatae. Dolore numquam id fugit ratione asperiores perferendis quo.

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