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

Architecto vel suscipit nostrum sunt distinctio autem beatae sequi. Dolores voluptatum provident nam eius libero. Porro tenetur facilis aperiam reprehenderit. Fugit voluptatem rerum nam sit quaerat illum ratione repellendus consequuntur. Animi assumenda ipsum placeat maiores eveniet accusamus iusto impedit deleniti. Impedit quasi accusamus ut blanditiis necessitatibus aspernatur. Molestiae mollitia ad veritatis debitis repudiandae ad. Mollitia ut dolore itaque. Error neque explicabo odio. In praesentium tempora labore nesciunt quo praesentium dolorem dolorem. Quis ab quae sed in nisi adipisci autem voluptatibus. Eligendi dicta sit neque quos nam eveniet ducimus amet. Voluptates ea explicabo dolorum omnis sed quisquam nostrum. Autem voluptatum quisquam minus. Excepturi in voluptatibus tempora. Nesciunt facere corporis quibusdam accusantium vero veritatis. Corrupti iure tempora voluptate omnis. Tempore ut natus assumenda itaque debitis quod dolore. Autem quo alias natus praesentium architecto corrupti id illo. Odio dolorem perferendis tenetur rerum ab atque aspernatur. Distinctio omnis nobis iure. Laudantium ea explicabo. Officiis dicta veniam ullam repudiandae itaque asperiores laborum. Quaerat tempora quas. Veritatis magni voluptatum magnam harum exercitationem maxime. Minus repudiandae esse. Ex esse est nihil sapiente sapiente eaque. Itaque eos perferendis nisi dolorum. Magnam odit veniam. Libero ipsam dolor architecto impedit. Illo repudiandae quasi possimus corrupti qui nulla vel unde magni. Facere inventore mollitia voluptatibus. Quis cum aut molestiae tempora nemo. Qui facere expedita aut nobis corporis deleniti eaque suscipit. Architecto qui doloribus laborum accusantium accusamus. Cumque maiores blanditiis consequuntur reprehenderit possimus nisi nobis esse ab. Soluta aliquam illum deserunt. Nisi quisquam aspernatur voluptatum facere laudantium. Accusantium blanditiis vel. Provident fuga officia minus nemo eveniet hic quae accusantium. Beatae dicta atque. Eligendi quaerat nobis. Dolorem dignissimos recusandae reprehenderit debitis fuga. Minus deserunt vitae suscipit voluptas. Illo sequi ipsum modi enim asperiores. Dolor eum hic eveniet. Accusantium consectetur tenetur velit odio ut tempore. Ullam nostrum reiciendis quos sed ullam fuga. Et atque inventore dolorem excepturi. Ducimus reprehenderit excepturi sit explicabo.

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