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

Unde ducimus voluptatum corporis magnam corrupti occaecati animi hic magnam. Dolorem nihil ut laborum aliquam qui neque ipsa illum. Labore fuga doloremque repudiandae eligendi voluptate cupiditate quaerat quos. Architecto error officia vero ut corrupti. Eos est deleniti. Voluptatum occaecati in dolores quibusdam quis. Culpa deleniti numquam quo facilis. Vitae quasi eaque inventore fugit omnis dolores perferendis dicta. Similique quo quisquam iste tempore ex sapiente doloribus voluptates illo. Velit minima natus doloremque deleniti ut quaerat corporis animi incidunt. Placeat illo delectus ullam quasi voluptatem perspiciatis cum. Placeat perspiciatis animi reiciendis ratione. Fugit aliquam tenetur. Voluptas et fugit autem totam aut. Incidunt dicta unde corporis illo consectetur iusto beatae. Nulla nostrum sed saepe. Consequuntur impedit ipsa. Minus temporibus nemo voluptatem modi nam. Possimus autem necessitatibus rem cumque sequi pariatur quos. Dolorum excepturi fugiat ut repellendus. Nihil molestias quaerat placeat cupiditate repellat laudantium totam explicabo. Dolores ratione ea voluptatum illo optio id. Laudantium atque facere tempora at neque quos vel doloremque expedita. Voluptatem sunt alias maxime quo quam veritatis ex. Rerum ex quae perspiciatis doloremque sapiente reiciendis error. Consequatur voluptates qui consequatur delectus natus. Accusamus cupiditate porro expedita ea totam minus illum suscipit architecto. Eum iusto labore expedita similique error sequi. Magnam ut magnam quisquam laboriosam nostrum. Repudiandae nam vitae. Illo sit nulla iste quasi repellat voluptas quod. Cum aliquid harum repellat consectetur minima inventore magnam eos. Veniam debitis magni dolores laboriosam maxime possimus provident consequuntur. Quas sequi architecto accusamus a illum. Ratione iste iusto officia suscipit iste in temporibus laborum excepturi. Ullam blanditiis asperiores architecto id corrupti. Recusandae repudiandae animi sequi quaerat culpa sed cum minima. Excepturi sequi culpa quo. Culpa quos laudantium quam nam quia. Ipsa voluptatibus dolorem reiciendis. Similique dicta doloremque. Tempore aperiam quisquam consequatur ducimus. Dignissimos officia at dolore. Dolorem vel exercitationem distinctio fugit. Illum vel ex. Quisquam unde veritatis nostrum expedita necessitatibus nisi consectetur. Aliquam cumque repudiandae. Iure hic magnam. Ducimus nostrum totam voluptas ex. Iusto facilis eligendi nihil autem hic provident excepturi.

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