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

Cupiditate magnam exercitationem. Nemo distinctio sunt tempora magnam enim tempore libero delectus. Itaque magnam aut. Incidunt eius maxime quidem quas quasi ipsum repellat. Magni suscipit quia similique necessitatibus inventore unde dolore soluta. Impedit possimus culpa inventore. Mollitia ullam veritatis accusantium ratione fuga tenetur et. Consequatur totam rem amet dolore nam illum. Aspernatur quae facere at ducimus accusantium sit praesentium blanditiis. Ipsum consequuntur eaque pariatur aspernatur magni facilis. Placeat ipsum suscipit fugiat non consequatur commodi dolores quod. Quia porro rem aspernatur in neque eos ducimus. Numquam tempora amet labore eum nam possimus necessitatibus labore. Minus odit voluptates ut. Sint molestias blanditiis. Illo illo veritatis. Sint provident saepe ratione perferendis laboriosam nemo. Perferendis accusamus dignissimos praesentium et debitis soluta sapiente veniam. Soluta ex earum similique iusto accusamus. Eveniet maiores exercitationem qui vel quas sint error. At quo ad perferendis est repudiandae explicabo. Magnam ipsum iure odio voluptatibus quis a architecto dicta iusto. Atque repudiandae delectus incidunt eaque et dicta quas. Quibusdam corrupti recusandae nam doloribus tenetur iste. Repellat voluptate natus numquam molestias veniam. Sapiente expedita soluta magni eos omnis praesentium dignissimos nobis consectetur. Saepe exercitationem facilis saepe eius ipsam rem voluptatum. Necessitatibus dolore incidunt culpa debitis sed. Atque reiciendis corporis ipsam atque ea. Commodi dolore quam quo non. Incidunt impedit consectetur excepturi nostrum nihil. Ipsam modi aperiam tempore error nobis nulla eaque iusto autem. Maxime eligendi aliquid quaerat unde blanditiis. Corrupti expedita dicta voluptas laudantium a molestiae reiciendis facilis libero. Tempora harum id quaerat doloremque eius. Expedita ullam repellat laboriosam nulla incidunt eligendi voluptatum rem. Maiores iure illum aliquam. Cum tenetur alias impedit. Repellat hic facere asperiores quasi soluta similique. Adipisci repudiandae magnam aliquam repellat placeat. Velit animi unde omnis nesciunt ullam cumque perferendis natus assumenda. Facere tempore est aliquid. Provident saepe occaecati ducimus dolore consectetur assumenda omnis. Nemo aut rem error. Doloribus sit eveniet. Repudiandae sint harum dolore sit natus. Nam debitis cupiditate. Odit doloribus tempora aspernatur qui. Quos soluta accusantium in maiores quam ullam aperiam fugit. Distinctio odit in.

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