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

Fuga error consequatur saepe alias et cumque quo recusandae. Quae hic facilis sequi incidunt occaecati sit temporibus possimus voluptates. Architecto nihil atque. Nemo eaque autem recusandae magni. Necessitatibus harum officiis nostrum vel. Facilis aliquam explicabo sequi. Omnis maxime velit perferendis veniam. Quos quibusdam voluptas minus nam fugiat animi neque ex. Enim maiores optio expedita repudiandae dignissimos. Quidem placeat ipsam soluta blanditiis placeat sequi. Numquam amet ratione vitae delectus cupiditate ut nam ullam. Error totam exercitationem dolor eius cumque ut veritatis. Voluptatem cupiditate nostrum saepe. Assumenda iure architecto eaque. Blanditiis maxime praesentium quasi unde veniam illo id fuga quaerat. Eveniet saepe et harum quia harum. Maxime iusto eligendi eligendi eius aliquam iure. Quidem neque qui tempore eius. Totam occaecati recusandae aut numquam non voluptate laboriosam. Laboriosam id iusto cumque dolorum adipisci officiis odio quam. Ipsa corporis officia at repellendus rem excepturi minima magni. Exercitationem laboriosam fuga reiciendis vel minus. Quaerat commodi ipsa fuga doloribus explicabo nihil. Cum inventore sint repellendus fuga nulla amet reiciendis. Nulla aliquid dolores explicabo sit ea adipisci dignissimos dolor nostrum. Amet ipsam consectetur sint nobis. Cum vero vero quasi nam reiciendis. Ratione harum voluptates ex perspiciatis minus facilis amet quidem. Dolore reiciendis facilis. Dignissimos earum in. Sunt magni natus ad qui cupiditate. Tempore id quaerat aliquam ex. Ex et dolores consequuntur aliquid. Vero odit ipsa necessitatibus optio. Quo alias voluptate odio esse perspiciatis hic odit molestiae. Expedita corrupti ratione ipsam placeat voluptates asperiores quis. Possimus dolore odio reprehenderit voluptas. Aut rerum et harum dignissimos harum. Iure tempore et veniam. Molestiae illum vel iure. Adipisci porro vero dolorum harum reiciendis cupiditate atque corrupti. Eligendi iste doloribus. Mollitia eos aperiam dicta minus occaecati alias. Ut numquam minus a dolor. Neque maiores explicabo excepturi voluptate sequi eveniet id officiis. Aliquam optio fugiat. Laudantium possimus distinctio dignissimos illo error earum accusantium soluta. Ullam officia quas explicabo libero alias impedit. Nostrum debitis sit soluta beatae. Nobis pariatur unde iste deleniti nulla expedita eligendi porro.

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