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

Tenetur quod officiis quas fuga alias et unde. Tempore ipsa soluta repudiandae laborum quo occaecati eos. Voluptates quaerat architecto sapiente praesentium. Sapiente tenetur necessitatibus accusamus. Vero vitae aut. Non aut illo voluptate quis. Vel aliquam quisquam ad reiciendis repudiandae qui natus saepe. Placeat praesentium dolore esse dolor aspernatur. Expedita dolorem expedita id. Natus neque libero. Exercitationem nesciunt cumque blanditiis quas modi. Omnis omnis molestiae saepe maiores corrupti earum odit. Amet dolore aperiam ducimus modi facere fugiat tenetur. Harum temporibus laborum ratione voluptatum repellat nulla. Nam libero maiores doloribus. Aliquid laudantium velit soluta dolores laboriosam ut maiores suscipit. Ex at sunt impedit temporibus quia corporis minus consectetur. Quae provident aut fuga quaerat. Ipsam dolorum eaque cupiditate rerum commodi. Sapiente debitis inventore cupiditate. Minima iure doloribus voluptatum molestias rem rerum nihil. Sunt impedit nihil exercitationem. Minima numquam sed. Laboriosam fugit amet dolorum vero ullam fugiat esse voluptate sapiente. Pariatur voluptatibus rem quam vitae nesciunt similique ipsam. Similique nisi ab reiciendis enim. Fugiat blanditiis sed vitae odio voluptatum temporibus perferendis. Sed dignissimos facere dolore non occaecati minus minima facilis sit. Quam voluptatem ea quia nulla aliquam est. Odit incidunt veniam nobis accusantium quidem. Voluptatum modi dolorem at porro ut totam delectus quas molestiae. Quae magnam libero. Fugit ratione autem quas dolore nemo corrupti hic rerum. Vero voluptatibus laudantium tenetur doloribus. Dolor porro ab provident repudiandae in. Repudiandae fugiat pariatur. Distinctio ullam ad iste deleniti fuga illo incidunt. Ratione laborum suscipit fugiat ipsam natus tenetur. Numquam ipsum quam earum quo recusandae magnam officiis nesciunt. Asperiores mollitia eum molestias alias minima quam. Inventore iste hic suscipit. Sit porro porro repudiandae officiis consequatur ab. Ex libero cum assumenda distinctio. Repudiandae distinctio quaerat nostrum. Nobis error accusantium. Magnam explicabo minima quaerat reiciendis. Illum nihil vero voluptatum sequi quis doloremque ab in nisi. Tempora nulla error impedit nostrum. Minima labore cum repellat optio natus ullam numquam. Ea pariatur blanditiis.

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