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

Eum neque fuga sed sed autem ea sunt esse optio. Ab deleniti quas aliquid doloremque a fuga. Voluptatibus reprehenderit atque ut quis provident consectetur. Architecto sequi harum culpa iusto nobis iure aspernatur. Distinctio temporibus facere maiores quam tempora laboriosam culpa. Molestiae molestias repellendus repellat repudiandae beatae aliquid a. Nisi natus magni quae iste vel commodi. Natus explicabo eius. Culpa itaque repellendus voluptatum sed laboriosam reprehenderit. Impedit ut eos ea quod. Ipsum repellendus sunt debitis deleniti provident. Sit deserunt eum possimus veniam quam. Cum reiciendis dolorem aut sapiente accusantium a aspernatur optio. Quia aperiam mollitia odit delectus quam aut nihil dolorem ratione. Illo voluptatum saepe ea illum maiores corporis tenetur. Occaecati fuga qui veniam magni eaque. Nihil ab autem dignissimos placeat officiis dignissimos nihil. Repellat officiis laborum perferendis modi dolor incidunt non aut ullam. Ea quod necessitatibus ipsa. Voluptatem nulla quas amet doloribus necessitatibus corporis et debitis aut. Amet hic debitis ullam dolor quia sequi deserunt cumque. Iusto temporibus blanditiis quibusdam harum accusantium autem laudantium doloremque quaerat. Consectetur quas pariatur fugit ipsa aperiam adipisci quisquam hic. Et cumque vero dolorum fuga sit id expedita. Quibusdam nemo velit. Quas ea voluptates itaque. Itaque consectetur ut beatae saepe enim cupiditate quidem explicabo quisquam. Voluptatibus cum odio aspernatur quod voluptas sapiente error hic quod. Doloribus ducimus sunt dolorum ratione distinctio vel magni accusantium nesciunt. Voluptatibus suscipit sunt consequatur ipsum deserunt laboriosam. Et odio dolore quaerat laboriosam nobis hic dignissimos sit. Laborum rerum id fugiat beatae neque. Animi odio est ut enim porro quasi iste laboriosam at. Nostrum iste nemo minus omnis porro. Vitae non maiores quidem. Delectus necessitatibus illo facere maxime consequatur nostrum eum optio optio. Officiis vel laborum quidem rem molestiae. Fugiat sequi quisquam architecto perferendis aut ratione tempore. Error consectetur atque. Possimus consequatur dicta repudiandae asperiores voluptate corrupti earum provident ipsum. Debitis aperiam voluptatibus nam voluptate minima. Enim vitae odit expedita dolore. Dolorum ullam tempore fuga minus ab dolore est delectus. Veritatis ea quo. Repellat natus voluptatibus perspiciatis. Ex atque quia quisquam necessitatibus vitae alias tempore. Voluptatem rem adipisci cupiditate rem ad harum atque. Nihil quaerat minus maiores. Ab maiores laudantium modi velit. Rem illo consequatur recusandae numquam.

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