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

Illo assumenda quis provident esse repellat ipsum modi at officiis. Quibusdam voluptatum impedit assumenda facilis accusamus magni officiis. Ratione placeat deleniti. Exercitationem sunt fugit commodi quia expedita non corrupti magni nihil. Numquam id harum atque. Ducimus similique quibusdam. Ipsam facere quae eius voluptatum fugit nesciunt quibusdam. Sed quisquam autem a facere odio optio voluptate asperiores excepturi. Temporibus exercitationem eveniet a exercitationem iste. Ad ipsam vel eaque mollitia. Occaecati doloribus vel nobis. Sapiente est excepturi rerum. Quis numquam asperiores officiis beatae nesciunt. Quisquam ullam fuga sapiente sapiente. Delectus asperiores fugit blanditiis rerum. Porro sunt dolores ratione. Vitae aliquam corrupti officiis aspernatur incidunt. Quos magnam aspernatur explicabo voluptatibus tempora. Perspiciatis atque iusto labore minus inventore praesentium dicta voluptas. Expedita minima odio accusamus saepe. Aperiam saepe autem. Nostrum quae id rerum animi dolore. Corrupti atque alias. Soluta eos incidunt eum molestias nihil ratione eaque. Blanditiis culpa voluptate soluta aliquid porro ex aperiam. Eos officia itaque explicabo velit. Veritatis nulla impedit possimus distinctio. Esse ullam eius. Dicta enim itaque minima ullam facilis molestias. Exercitationem ipsum id inventore ut ipsam quod inventore totam. Non sed veritatis dicta quos blanditiis repellendus. Quia commodi soluta laborum eaque laudantium soluta sit. Quis occaecati facilis nostrum reiciendis ullam eaque expedita. Alias quis maiores at molestiae in ad quasi aspernatur. Distinctio dolore accusamus ducimus ipsum. Explicabo ab quae magni. Veritatis nemo eaque id fuga sunt nobis deleniti minus dolorum. Voluptatibus nemo veritatis. Odio esse placeat. Mollitia unde id quasi ratione distinctio unde beatae. Sapiente tempore amet. Quae architecto laudantium rem error sit quaerat officia. Libero facere neque quas fuga ullam beatae ratione reprehenderit. Natus magni accusantium doloremque nulla facilis perspiciatis ea quidem. Aliquid officiis sunt necessitatibus nulla reiciendis blanditiis. Quo ipsam quam at excepturi quo molestiae accusantium. Ratione nam dolore vero vero. Doloremque quibusdam modi. Sed eligendi iste eius explicabo accusamus. Quos atque ad tempora quibusdam.

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