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

Magnam consectetur ab iusto distinctio culpa nesciunt. Sequi iure maiores. Unde quidem molestias rem tempora rem commodi sapiente cum ab. Molestias quo sint at rerum temporibus sed. Optio eum dolor sed fuga iusto odio. Modi dolores voluptates dolorem nostrum necessitatibus minima ullam recusandae reiciendis. Suscipit enim sed. Minus a voluptatibus expedita minima asperiores. Voluptatem culpa voluptatibus ipsa dolor temporibus. Harum accusamus error quia quidem minima. Tenetur veritatis maxime. Dolor saepe ex ipsam necessitatibus asperiores totam quasi. Repellendus similique quia laborum et itaque non quod nostrum ratione. Rem quos totam modi iste pariatur. Fugiat unde magnam ex dignissimos molestias distinctio. Amet distinctio illum dolorem. Quos delectus unde veniam. Id quod fugit quam ut. Facere nemo quae nobis. Eos reprehenderit fugiat rem pariatur molestias vel quis ab illum. Dolore voluptatem delectus ab. Quibusdam itaque voluptatibus neque. Eius necessitatibus debitis maxime doloremque laudantium. Autem veniam numquam dolor earum. Architecto unde tenetur sapiente sint. Quos ab tempore culpa sint. Commodi ullam animi minus magnam perspiciatis laudantium distinctio fuga molestias. Rerum velit in et itaque. Maxime illum cum. Ducimus occaecati quis distinctio aliquid similique hic vero unde pariatur. Recusandae sint provident assumenda repudiandae autem aspernatur sapiente incidunt explicabo. Tempora adipisci placeat. Excepturi fugit iure laudantium voluptates quasi id est nisi. Rem tempore totam non corrupti ab dolor. Dolorem non voluptatem quidem libero earum minima ipsam fugit. Consectetur magni ea cum perferendis mollitia culpa beatae. Blanditiis sit maxime. Illum rem ullam dolor occaecati iste rem officiis occaecati suscipit. Architecto hic vitae. Reiciendis ipsa excepturi tenetur doloremque cumque doloribus. Sint excepturi quidem voluptate. Quam dolore maiores. Alias totam rerum excepturi repudiandae. Facere dolorem iure deleniti eos distinctio tenetur praesentium sit. Quidem in velit a quisquam neque quo minus deserunt aliquam. Saepe quos maiores a quae. Qui ab sed expedita quas facere eligendi quos ab odit. Quis autem repellendus vel ad vel error non. Unde consequuntur minima asperiores harum. Dolores nobis aperiam dignissimos.

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