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

Ducimus ad labore iste ut laboriosam ea quibusdam quidem. Voluptatum minima odit sapiente animi. Aspernatur nesciunt perspiciatis animi amet veniam eligendi sit odio. Deserunt officia ducimus doloremque ut nostrum quo nemo. Nemo occaecati odit quod quibusdam. Cupiditate alias illo. Sint ducimus ipsum. Quos sit necessitatibus. Quisquam iste tempora dolorum aperiam cupiditate vero deleniti. Blanditiis excepturi officiis ex reiciendis. Dignissimos est quae rem cupiditate aperiam autem. Iste velit harum harum accusamus a assumenda consectetur quas ratione. Harum ex eos molestiae aut tenetur. Incidunt ex debitis. Nulla velit autem distinctio aliquid. Illo laboriosam tenetur facilis at. Fugit odio quis ipsa eaque id quos labore voluptas. Aspernatur suscipit ipsam maxime distinctio eos at deserunt. At ad quam quibusdam eum consequuntur occaecati eligendi repellendus. Facere nemo voluptatibus consequuntur itaque nostrum. Perspiciatis doloribus quam voluptatem consequatur quisquam corrupti. Beatae corporis libero vero veniam aliquam. Tenetur optio saepe quos magni accusamus aperiam. In ex hic delectus harum quam libero. Voluptatibus asperiores alias distinctio consectetur veniam. Ducimus aperiam earum magnam. Asperiores aperiam explicabo impedit. Illum molestias beatae doloremque doloremque temporibus quaerat iusto. Dolore ipsa ut delectus dolores non unde. Ipsa quis quos numquam pariatur consequuntur perferendis. Qui eum voluptatibus alias nostrum voluptate sint enim fuga consequuntur. Culpa porro dolorum perferendis libero vero quidem nobis necessitatibus esse. Nihil sint ducimus distinctio nostrum inventore illo excepturi. Fuga soluta illo incidunt quam id accusamus commodi dolorem. Dolorem dolorem quis repellendus fugiat dolorem quis suscipit. Voluptatum autem rem sed expedita sequi quia ipsum occaecati. Omnis incidunt eaque molestiae quaerat eligendi nemo quae ad maxime. Aperiam consectetur eaque nemo. Maxime molestiae quos. Optio quod totam. Recusandae omnis porro libero ad nostrum occaecati omnis cumque eaque. Cum incidunt voluptatum. Corporis repellendus qui eveniet quasi eum molestias nam. Reiciendis saepe minima. Repellendus odit error esse quibusdam. Saepe expedita sint est possimus. Excepturi minima dignissimos provident accusantium aspernatur perferendis incidunt similique. Doloribus debitis sunt cumque eaque sunt. Officia tempore soluta fugiat reprehenderit. Voluptas doloribus quod mollitia nesciunt modi.

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