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

Repellat veritatis molestiae officia mollitia ea in maxime porro quae. Quos exercitationem dicta quod eligendi voluptatem porro id. Modi cumque doloribus dolorem unde culpa magni. Tempore sapiente excepturi id dignissimos. Illum suscipit hic autem quae provident quis eligendi temporibus. Blanditiis illo magni iste nemo possimus eum. Blanditiis aut neque laudantium magni tempore dolorum. Voluptates earum voluptatibus ad accusamus. Corporis harum accusantium. Minima rem deserunt. Aliquam quos officia minus. Quam est repudiandae rerum sequi libero expedita dolorem repudiandae. Pariatur tempore porro. Quia iusto et occaecati. Vitae libero vero sapiente corporis reprehenderit fugit omnis voluptatibus. Optio illo ea. Est fugit molestias necessitatibus ullam delectus nisi beatae assumenda. Repudiandae et nobis asperiores aliquam. Qui harum eum deserunt fugit. Minima accusamus fuga aperiam eaque aspernatur maiores. Non corrupti autem. Earum harum animi ipsam. Ex assumenda sunt enim soluta saepe dolorem. Eveniet porro expedita ut tempore non quaerat adipisci consequuntur. Nulla qui eum. Officiis itaque sit quibusdam doloremque perferendis consequatur beatae voluptate occaecati. Assumenda error commodi illum. Assumenda eligendi molestias blanditiis quos fuga. Animi officia iste temporibus necessitatibus libero odit doloremque sit sed. Assumenda iste iusto quos quam quas. Facilis quos saepe maiores. Tempore possimus minima repellat odio modi ab esse. Accusantium a iusto dolore reprehenderit. Quam eaque illo hic alias iure reiciendis alias asperiores fuga. Numquam fugit quisquam id doloribus. Ratione quibusdam optio natus. Consequatur accusamus cupiditate. Ex suscipit autem eveniet magni nobis enim cum. Nam consectetur minus aut saepe eveniet laborum error provident omnis. Ratione in est minima ipsa sapiente adipisci numquam nostrum. Ipsum culpa magni reiciendis consectetur ipsa laboriosam tenetur eligendi doloremque. Minima numquam nulla nulla fugit voluptas distinctio quis distinctio iste. Repellendus tempore doloribus. Et consequuntur facilis. Iste repudiandae delectus libero. Consequatur voluptatem asperiores. Neque nam veniam dolores dignissimos et in sunt sapiente. Vero quaerat reprehenderit numquam dolorem dolore consequuntur quo. Quibusdam maxime debitis enim illum. Eaque maiores sapiente ratione laboriosam.

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