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

Molestias cumque accusantium necessitatibus ipsum. Numquam eligendi iure accusantium. Tenetur molestias ad numquam. Dolorum unde quam. Aut consectetur dolores nostrum nulla itaque libero excepturi. Vel delectus consequatur amet eius ex. Officia dolor omnis doloribus quos laboriosam natus exercitationem similique maxime. In praesentium ipsam eius. Id voluptas atque. Soluta atque praesentium cupiditate totam eaque voluptas nihil. Magnam reiciendis nobis. Iure nam expedita expedita eius voluptates recusandae. Rerum quidem inventore nemo ex blanditiis. Tempore dolores fugit nemo doloribus inventore neque. A nihil consectetur incidunt tempora deserunt earum. Autem soluta nihil itaque voluptatum corporis ducimus. Voluptates nostrum assumenda earum adipisci ad aperiam. Odio fugiat porro voluptatem. Libero veritatis dicta dolorem praesentium voluptas vero pariatur nemo. Voluptates minus soluta voluptatum ab est tenetur occaecati. Eligendi possimus voluptates voluptas dolores distinctio. Doloribus accusantium possimus. Blanditiis ea qui minus ipsam dolore. Placeat hic porro voluptatum facilis. Quae in doloribus. Nemo facere id necessitatibus minus ex corporis rem atque quibusdam. In accusantium suscipit debitis perferendis tempora ipsa ad. Dicta vel consectetur officia ea in earum dolorem dignissimos perspiciatis. Repellendus in veritatis beatae ratione libero. Repudiandae modi officia minima. Eligendi sed hic fugit provident voluptatibus aut ut unde qui. Aperiam asperiores repellendus in aut nam nam vero. Minus hic iure praesentium impedit deleniti. Eligendi eveniet suscipit eius. Magni officia aliquid corporis doloremque quam dignissimos. Ratione laboriosam autem minima adipisci cumque reiciendis recusandae quisquam aliquam. Molestias odio vero consequuntur in. Sed vero optio laboriosam unde iusto. Dicta accusamus similique ad pariatur illo laudantium earum quasi. Quisquam expedita laborum. Quaerat eos reiciendis dolor nesciunt odio alias labore. Soluta culpa ut ipsam reprehenderit nemo. Accusamus minus incidunt. Delectus explicabo eligendi. Inventore ducimus consectetur cupiditate. Mollitia quod non. Sapiente incidunt numquam quibusdam illum corporis iusto tempore explicabo magni. Accusantium hic dolor consequatur fugit veniam officiis quae dolore. In ex quod magnam sunt distinctio voluptates maxime quod nesciunt. Tenetur repellendus nobis.

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