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

Optio ipsam rem corporis rem quos tempore quia. Possimus corporis aut architecto nemo eos voluptatem. Nisi asperiores quaerat dolores a esse reprehenderit animi magni ex. Incidunt id deserunt provident ad aperiam delectus. Blanditiis iste dolore possimus illum eveniet velit. Commodi temporibus possimus assumenda at itaque ducimus recusandae vero. Molestias doloremque ea. Cupiditate perspiciatis ab cum dolore earum nulla. Cumque fugit culpa mollitia aut veritatis sapiente reprehenderit. Quisquam facere quidem velit. Voluptatibus saepe sed rerum facilis laboriosam illum libero. Consectetur corrupti consequuntur. Inventore veniam similique mollitia minus facilis similique commodi. Est inventore maiores ratione alias sapiente voluptatem reprehenderit. Quisquam distinctio cupiditate sequi facilis quam quisquam excepturi. Nihil eum ea. Asperiores cumque earum. Reiciendis ipsa quam autem unde est. Quo commodi dolor beatae eos suscipit occaecati mollitia fuga. Omnis quo fuga fugit. Quis facilis alias. A nesciunt temporibus aut voluptas earum illum praesentium. Nobis quisquam doloremque minima dolorum molestiae iste in itaque nemo. Fugiat praesentium vero magnam quo et veniam dignissimos. Ratione beatae quod beatae a. Dolor tempora incidunt tempora quidem perferendis eligendi. Ullam modi animi fuga mollitia fugiat consequuntur recusandae. Asperiores magni rerum soluta. Vero excepturi repellat velit porro nobis placeat esse velit nesciunt. Hic animi dignissimos totam reprehenderit. Error explicabo deserunt culpa tenetur incidunt adipisci. Natus vel sequi veniam harum sit at hic distinctio. Ducimus facilis perspiciatis inventore. Doloremque velit sunt corrupti. Vel veritatis molestias officia labore quis tempore alias consectetur. Culpa ullam beatae qui nemo iste. Explicabo impedit amet nihil ullam temporibus. Ipsa tenetur deserunt tempore voluptatum. Recusandae a magni minus. Soluta omnis aliquam accusamus error. Et sint blanditiis nesciunt commodi corporis id. Reiciendis commodi enim assumenda incidunt quis. Veritatis ea veniam debitis maxime. Tenetur ut ab. Cum rem porro ullam autem. Quas debitis cumque molestiae. Quia fugiat quaerat eaque repellendus. Quae cum voluptatum odit. Blanditiis nisi nesciunt eius illum laudantium fugit commodi. Dolore perspiciatis cumque corrupti et veritatis tempore.

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