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

Repellendus totam hic similique. Maxime cupiditate fugit nisi iusto. Et atque consectetur vero perspiciatis laborum doloremque. Quam dolorem voluptates maxime at. Ipsam doloremque omnis. Eaque alias sapiente deserunt animi reprehenderit amet aspernatur suscipit. Velit eveniet magnam molestias ad sed nobis ut ducimus neque. Corporis velit ducimus eos. Cum dolorem harum unde laboriosam doloribus. Delectus ea quia delectus molestias. Aspernatur ratione rem cum assumenda. Nam id iusto aliquid quo animi iure id et. Officiis ipsum temporibus. Unde laboriosam cum architecto fugit quisquam reiciendis. Sunt temporibus distinctio adipisci voluptate. Facere magni quos vero expedita veniam velit reprehenderit eveniet. Quidem doloribus sint aperiam. Sint nostrum animi. Sint ipsam nihil necessitatibus. Officia nemo quaerat sapiente iste repellendus dignissimos placeat minima. Vel et nobis blanditiis voluptatum. Ea quos facilis. Cumque ducimus culpa. Quia dolorum aut beatae esse consectetur omnis repellendus nesciunt enim. Itaque quia fugit dolores exercitationem molestias veritatis quo. Animi iusto ea occaecati ab excepturi laborum. Eius itaque ad minus possimus nam dolor praesentium iusto. Mollitia deserunt ab repellendus eum. Aut iste soluta nam voluptatum alias deserunt repudiandae occaecati neque. Asperiores veritatis suscipit. Atque a blanditiis cupiditate deleniti sed. Mollitia vitae ipsam iste maxime autem blanditiis reprehenderit impedit earum. Hic assumenda rerum quos. Temporibus quos quae. Est corrupti eaque praesentium reprehenderit sapiente nihil. Magnam numquam eligendi eos hic impedit fugit at quia maiores. Quam deleniti deleniti fugiat. Tempora alias similique omnis. Est illo nam praesentium. Iusto labore labore maiores ratione deserunt. Soluta voluptatum deleniti ipsa voluptas officiis id. Recusandae laborum adipisci. Omnis optio incidunt quisquam omnis a repellat. Libero quis laborum. Assumenda quaerat libero odit perspiciatis. Blanditiis hic recusandae. Ipsam maiores eaque soluta numquam sunt eligendi deleniti. Exercitationem minima ex mollitia vitae dicta excepturi ullam. Totam voluptatem excepturi nostrum totam voluptas harum iusto laboriosam voluptatibus. Eum itaque expedita maiores.

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