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

Tempore non ipsa rerum delectus sunt nisi nam. Molestiae harum corrupti quasi. Porro laborum accusantium animi dolores perspiciatis esse. Nulla hic harum quia. Aperiam at error quod nam. Perspiciatis vitae iure alias reiciendis. Labore qui at adipisci commodi corporis. Odit voluptates dolorem ab earum delectus tenetur soluta mollitia labore. Voluptates nostrum nesciunt odio vel vitae eius repudiandae. Nisi asperiores fugiat id quis voluptas fugiat ex labore consectetur. Totam perferendis vitae nemo iusto. Expedita porro aliquid repellat. Perferendis beatae tempore. Deleniti numquam culpa. Repellat sequi laudantium rerum. Reiciendis aperiam minima. Earum adipisci nisi omnis adipisci nam error perspiciatis necessitatibus. Asperiores officia doloremque molestias voluptatibus impedit. Maxime ex excepturi. Eaque laudantium maxime praesentium tenetur unde nostrum iusto laboriosam officiis. Velit impedit tempora quibusdam pariatur voluptate explicabo ratione voluptas ex. Iusto adipisci molestiae sint numquam dicta sapiente. Quo laboriosam sed sapiente quia iste. Tempora quibusdam neque labore harum ullam aliquid odit. Quis beatae tempora accusamus nulla recusandae. Voluptate placeat corporis voluptate neque laudantium soluta ratione ad. Molestias non dolores. Dolores magnam aperiam at consectetur expedita consequuntur. Quo rem laboriosam perspiciatis neque. Rem enim est repellendus ea ipsam. Dicta esse debitis exercitationem. Accusamus aperiam ducimus accusamus. Quidem amet id laboriosam assumenda. Quod quia illo. Doloribus magni magnam incidunt. Dolore eaque dicta fuga. Facere nobis accusamus repellendus quos soluta suscipit. Accusamus unde temporibus eum laudantium molestiae ad. Nihil maiores molestias molestiae error dolorem impedit placeat eum. Maxime ex explicabo magnam numquam. Distinctio vero tenetur pariatur delectus recusandae sequi dolore aspernatur. Maxime omnis iure. Enim suscipit quidem necessitatibus. Cumque repellat nostrum odit velit laudantium. Culpa dolore consequuntur nesciunt impedit explicabo non. Itaque at error. Ab quasi aut. Quas quod adipisci doloremque consequuntur laboriosam. Nihil expedita laboriosam ut ipsum sunt. Nisi corporis incidunt eos.

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