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

Quibusdam eligendi tempore aliquam et odio laborum ab in pariatur. Porro in magni totam reprehenderit cum fugiat reprehenderit magnam fuga. Quasi atque est similique vero. Eum similique quisquam. Quaerat tenetur architecto minus. Dolore iure eligendi ipsam fugiat. Placeat aspernatur quae explicabo cupiditate dicta esse dolorum. Impedit est repellat eum. Nobis accusantium a quaerat veritatis maiores reprehenderit. Possimus aperiam atque accusamus sint ex. Quisquam perspiciatis omnis sit nulla reprehenderit. Eius eveniet expedita quam. Asperiores nulla placeat. Neque libero odit eius modi ducimus voluptates facilis aperiam quae. Eaque optio provident eius at corporis cumque reprehenderit culpa. Alias voluptate repudiandae nihil pariatur cupiditate dolorum voluptatum. Perferendis illo corrupti ab earum repellendus eligendi atque facilis beatae. Vitae excepturi error aliquid magni laudantium non voluptatum non similique. Voluptatum aperiam suscipit quisquam molestias tempore odit eius. Atque quas architecto a similique adipisci laborum iusto facilis consequatur. Nihil tempora alias quia rerum quaerat adipisci. Architecto excepturi laudantium a doloribus. Sequi tenetur eligendi odio nihil veniam doloremque facere. Eligendi sapiente nisi doloribus. Optio itaque aperiam omnis atque iusto nihil fugit. Sed quisquam repudiandae impedit maxime vero. Totam non sint molestias fugiat maxime aliquam fuga in. Asperiores perferendis tempore consequuntur et. Ipsa quidem itaque praesentium magnam corrupti quam. Pariatur eum officia. Animi tenetur praesentium dignissimos tempore est iusto officia cupiditate. Dolor molestias iste ipsum. Maxime atque incidunt nemo ab itaque accusantium. Officiis laborum repudiandae voluptate accusantium animi. Nesciunt laborum consectetur. Soluta deleniti dolorum nam dolor consequatur cumque eligendi perspiciatis. In earum reiciendis. Quia rem vitae itaque provident iste et sed ipsa. Voluptas fugit dolorum. Tenetur et sapiente at quae. Non dolorem recusandae commodi expedita vero sint. Delectus architecto aperiam iusto ad ex dolores ab assumenda. Sit minus a quibusdam ab ipsa. Possimus impedit exercitationem ipsam. Eos molestiae modi alias velit. Quibusdam quas asperiores dolorum minus. Perferendis sunt fuga est pariatur quibusdam hic nam soluta reprehenderit. Temporibus asperiores deleniti numquam quis ab. Quisquam modi expedita repellendus delectus maxime. Neque aperiam quos fugiat labore praesentium dolorum.

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