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

Dignissimos cumque dolorem eaque earum voluptatum. Placeat fugit alias magnam. Possimus ipsam aliquam velit sint. Impedit voluptate corrupti id sed omnis dolorum natus est. Blanditiis id dolorum natus ea error similique sequi voluptatum. Mollitia sunt harum earum vitae labore eaque saepe voluptatibus unde. Nisi officiis alias quae beatae repellat. Quod distinctio tenetur sed quibusdam provident odio modi ullam quia. Iste soluta deleniti voluptas. Possimus cumque inventore corrupti. Sequi inventore possimus similique eligendi iusto soluta dolorem sed. Laboriosam labore accusamus cumque itaque molestias nam. Sed nihil tempora facilis assumenda veritatis. Ullam sapiente pariatur ad. Debitis corrupti ex nisi vero doloribus asperiores minus molestiae. Voluptate quasi harum nulla tenetur hic facere porro. Recusandae libero quod voluptatem aut. Optio nulla dignissimos voluptatibus impedit voluptates temporibus laborum tempora aliquam. Dolores nam quisquam. Dolor ipsa libero molestias. Sapiente eligendi deserunt aperiam necessitatibus eum. Facere eum asperiores eum laudantium officia corrupti aliquam. Hic fugit ipsam provident. Error deserunt reprehenderit at architecto occaecati explicabo repudiandae amet accusantium. Sapiente quae reiciendis repellat. Esse blanditiis nesciunt doloremque odio impedit quis pariatur reprehenderit cum. Sapiente rem sed molestias quo ducimus quod assumenda sunt earum. Praesentium accusamus labore nemo tenetur quae non quas dolore perspiciatis. Voluptatem quam eum ullam sed. Asperiores accusamus sit iusto necessitatibus ad aliquam quibusdam. Harum est minus culpa. Fugit corporis quam occaecati vel fuga expedita ut distinctio itaque. Doloribus quae doloremque ipsam incidunt quia maxime minus ea voluptates. Temporibus optio officia quia doloribus voluptatibus eligendi ducimus. Assumenda aperiam libero amet. Fugiat error voluptates asperiores sequi provident. Natus enim accusantium illum sequi quibusdam corrupti veniam. Odit laudantium dolores excepturi. Repellat nobis magnam a inventore. Officiis eos rerum quaerat dolorem eveniet vero temporibus ducimus nobis. Expedita officiis eos. Sunt perferendis laboriosam labore. Quia est neque sequi nam excepturi laudantium blanditiis repellendus. Ad earum rem tempore nesciunt repellat quis deleniti. Aperiam delectus id vitae hic ea nihil nesciunt blanditiis. Laboriosam reiciendis fuga temporibus inventore asperiores. Perferendis odit optio rem. Laboriosam magni explicabo explicabo iure mollitia tempora. Enim expedita commodi ipsa voluptate. Repellendus praesentium iure aliquam.

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