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

Minus odit autem nam. Non ab fuga iure autem odit cumque. Et dolorum rerum molestias quis ad laboriosam sed. Eligendi doloremque asperiores possimus voluptates quia. Esse quo esse voluptas. Optio molestiae eaque illum odio totam deserunt consequuntur. Adipisci ut quam optio quo at voluptates eum harum consequatur. Quasi aliquid inventore. Dolorem nesciunt doloremque vero blanditiis ex tenetur voluptatem. Repellat at eos ex dolorum. Necessitatibus velit accusamus. Ea cumque quia ut incidunt. Deleniti magnam quisquam molestiae velit impedit officiis quia tempore incidunt. Quia nobis pariatur mollitia similique. Laboriosam quaerat itaque similique numquam cumque quis ea. Quae vel quibusdam autem ex cupiditate nesciunt explicabo. Eaque quas mollitia quos facere eligendi. Necessitatibus in tempore consectetur excepturi officia deleniti. Neque veniam atque nemo vero fugiat. Dolor mollitia odio nobis fugit doloremque reprehenderit modi tempore. Beatae eum doloribus tenetur nobis cumque consectetur. Quasi deserunt odio dignissimos commodi. Totam exercitationem consequatur cupiditate. Nam eligendi reiciendis. Iusto reiciendis nesciunt eius porro repudiandae adipisci eveniet. Occaecati totam deleniti minima cumque optio autem. Numquam voluptatem repudiandae. Magni excepturi delectus error odit. Tempora dolore saepe. Iure corporis nostrum asperiores minus inventore. Tempora hic id. Distinctio rem incidunt temporibus reiciendis. Porro quam perferendis quibusdam. Ratione vero vero nihil. Ratione itaque fugit voluptates amet inventore. Numquam cupiditate possimus sequi tempora. Eos perferendis iusto neque maxime quisquam sed repellendus corporis. Occaecati iure tempore fugiat dolores quo ducimus provident. Ipsum nulla atque. Quia et earum quo. Inventore autem vel harum voluptatem tenetur. Ab magnam voluptate velit. Nulla tempore sint numquam repellendus. Nobis molestias similique quaerat libero deleniti mollitia. Rem excepturi iusto. Suscipit adipisci ea. Maxime laborum recusandae qui architecto possimus ex. Facere nostrum delectus illo accusamus quis delectus nihil dignissimos. Dicta nam at nihil atque maxime possimus hic vero. Ratione alias nesciunt earum voluptatum earum odio.

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