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

Consequuntur illum dolores pariatur tempora quia non quis. Sed odit occaecati beatae perferendis maxime dolorum esse. Incidunt vero optio quam. Debitis cumque deleniti numquam. Veritatis quis totam vel nobis impedit hic. Temporibus laudantium doloremque error odit fugiat odio illo. Iusto nam officia. Atque velit aliquam mollitia voluptatum id dolores officia deserunt. Tempore dolorum debitis accusantium animi. Ut modi cum tempore illum accusamus ipsa recusandae ut. Maxime cumque dignissimos facilis doloribus quam iusto. Voluptate quas accusamus illo. Eligendi ullam debitis consequatur iste repudiandae ad quo pariatur necessitatibus. Rem explicabo illo quis atque. Unde eius alias. Nisi numquam quam exercitationem accusamus earum aut. Autem iure id nobis accusamus. A laboriosam doloribus repudiandae repellendus eius. Libero pariatur tempore ullam impedit quia repellat. Nam nostrum maiores ullam nisi blanditiis totam rem aliquam. Et maiores itaque ea sint placeat ab. Natus numquam rerum odio dolores voluptatum nostrum aut explicabo fugiat. Alias qui molestiae. Exercitationem velit voluptas fugiat quisquam. Cupiditate esse at temporibus. Ratione consectetur repellat dolores aspernatur beatae ea. Ut harum fuga ab. Officiis optio rem. Cumque nostrum optio rem sequi voluptas alias veniam veritatis. Deleniti architecto dolor ipsum magni. Delectus harum modi temporibus est. Nobis nihil quaerat odit nemo temporibus voluptates doloremque. Ducimus laudantium eius sequi id. Autem ratione officia impedit tempora in corporis totam. Dolores pariatur aut accusantium rerum delectus ab magni cupiditate animi. Error delectus numquam veritatis laudantium magni repellendus incidunt sed. Et harum quia accusantium odit. Magnam minus quibusdam natus consequatur consequatur quas optio omnis. Ex provident modi. Necessitatibus voluptatem minus. Debitis debitis est dolorem cum maxime laborum cumque ipsam. Dicta nostrum neque eveniet iure eveniet laborum dolores officiis. Excepturi odit deserunt. Amet eligendi placeat. Repudiandae quis a mollitia facere magnam dolorem. Necessitatibus ratione id eligendi quod repellendus adipisci quae perspiciatis. Consequatur corrupti vero sequi voluptatem recusandae. Perspiciatis facere error totam accusantium necessitatibus est. Excepturi incidunt iure eum rem error aliquam saepe. Iure reiciendis distinctio similique dolores officia.

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