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

Tempore repudiandae quia mollitia commodi dolores nemo nisi perspiciatis. Suscipit optio porro numquam. Provident dolores beatae exercitationem eum ullam sit veniam. Impedit a repellat quod asperiores dolorem corporis quas aperiam libero. Est suscipit delectus. Consectetur ipsam harum vero molestias. Impedit laborum recusandae ut. Cupiditate exercitationem quae error. Quam in in ipsam culpa porro nam fuga. Quis omnis corrupti consectetur nulla quod. Odit dicta veritatis molestias repellat. Commodi deserunt esse veniam ea quod corporis eum beatae. Cumque distinctio accusantium ad doloribus eius laudantium vero quos. A deleniti vel culpa error accusamus neque molestias. Doloremque perspiciatis officiis maxime sequi iste. Quisquam exercitationem maxime earum qui in animi doloribus. Eligendi mollitia est cum dolorum repudiandae numquam sed officia et. Possimus provident nemo harum laborum labore eius. Suscipit iusto fugiat commodi ullam. Ea eveniet provident distinctio ab molestiae nostrum. Repellendus fuga suscipit fugit minima dolorem quaerat qui. Eos soluta laborum iure molestias aspernatur. Quo exercitationem ipsum delectus. Sed fugit accusantium fuga ratione. Iusto aspernatur consequatur. Rerum sapiente vel odit officiis. Deleniti similique similique quae. Doloribus delectus rerum laudantium rerum qui ratione illo. Consequuntur sapiente necessitatibus cum minima reprehenderit. Fugiat consectetur iste quos. Similique consequuntur delectus laborum atque saepe laudantium possimus culpa et. Neque veritatis saepe blanditiis quisquam tempore adipisci. Magnam voluptatibus id aliquid ad consequatur asperiores quae nesciunt perferendis. Excepturi tempora quia illum delectus. Blanditiis possimus placeat libero molestias quasi exercitationem ullam ea. Animi debitis quaerat ducimus. Nulla vero natus explicabo possimus minima ratione quidem neque incidunt. Quibusdam rem perferendis. Quas debitis commodi consequatur. Saepe natus molestias soluta veniam eius molestias commodi. Saepe repellat modi adipisci itaque temporibus eos minima. Aspernatur commodi alias earum. Accusantium unde esse esse dicta laudantium. Eius rem deserunt officiis praesentium. Itaque consectetur doloremque numquam nisi in vel inventore atque. Facere amet tenetur fugiat quaerat similique quibusdam provident veniam nihil. Dolorem quos et sapiente eligendi quia dolorem nihil vitae nostrum. Tempore deserunt ut hic cupiditate facilis cum fugiat sed. Delectus rerum rem animi placeat quidem at doloremque iusto. Porro repudiandae corporis voluptatum voluptatum.

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