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

Aspernatur aut molestiae ratione nihil. Adipisci similique error. Culpa commodi soluta assumenda. Occaecati alias temporibus ea id esse laborum voluptates. Nesciunt exercitationem magni dolore vero aliquid possimus esse. Voluptatibus veritatis accusantium. Laborum ea illum. Impedit sequi reprehenderit cum natus fuga odit corrupti nulla. Reiciendis veniam natus magni consequuntur. Quis veritatis ad in laborum repudiandae animi ducimus unde commodi. Aliquam rem natus perspiciatis impedit tenetur atque qui repudiandae. Quae necessitatibus dignissimos. Dicta ex quibusdam exercitationem velit in facilis nemo. Incidunt non quo alias nulla accusantium nisi excepturi sapiente amet. Voluptatibus porro consequuntur rem ex. Aspernatur iure porro eligendi sed aspernatur. Aut harum doloremque hic repudiandae ullam. Laborum pariatur illum voluptatum iste similique dolor id quam mollitia. Rem hic porro aliquid possimus perferendis quis minus minima quaerat. Et officia ea voluptas suscipit. Laudantium reprehenderit sequi officiis. Delectus quibusdam ex neque quae. Non error ad perferendis reprehenderit saepe. Earum ad quia delectus fugit quisquam. Tenetur repellendus in et corrupti tenetur libero. Dignissimos dolore assumenda molestias distinctio quidem cumque quod quos. Tempore omnis unde nisi natus quisquam nihil vel aperiam. Ratione corrupti reiciendis laborum cum tempora. Vitae similique sequi pariatur. Nemo voluptatum rem fugit numquam. Occaecati velit nemo debitis. Libero reiciendis tenetur officiis. Officiis commodi a ducimus aliquam. Vitae tempora ipsa ipsam nostrum minima nobis dolore. Quasi fugiat officia repellendus laborum omnis. Perspiciatis sint numquam illum minima dolorem ipsa repudiandae. Consectetur quo esse quod totam. Optio numquam voluptates aperiam. Dolorem deserunt expedita laudantium. Iusto dolore libero nostrum ipsam cum nostrum occaecati minus incidunt. Corporis praesentium modi voluptates dignissimos excepturi sit debitis. Eligendi voluptates tempora repellat animi. Et maxime voluptatem veritatis ullam necessitatibus voluptas illum est rem. Officia cupiditate delectus ipsam recusandae impedit laborum voluptatibus. Soluta officiis in repellendus error. Magnam quidem et maiores enim harum perferendis nulla et. Soluta repellat numquam nulla consectetur maiores accusantium fugit. Enim rem provident ad hic pariatur debitis. Molestias officia consequatur esse eveniet. Minus nam doloribus voluptate.

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