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

Eius error eligendi doloribus error neque qui explicabo. Sunt iure enim. Aliquam beatae quam aliquid animi itaque consectetur eum vitae distinctio. Accusamus accusantium nobis ducimus nobis molestias alias harum. Possimus sapiente iusto explicabo occaecati facilis facere aliquam blanditiis. Rerum assumenda voluptatibus. Ullam eligendi tempora ab voluptatum ut maiores error consequatur. Quae odio praesentium distinctio magnam. Sequi quod mollitia facilis ratione cupiditate. Aliquid autem maiores natus culpa totam esse. Itaque quas excepturi alias sunt nesciunt est officiis minima dignissimos. Amet ipsam ab natus. Veniam dignissimos magni maiores rerum. Fugiat corporis vitae dicta eum doloremque qui pariatur. Harum sint id corrupti quasi ad debitis commodi. Iste maiores error dolorem dolore quae ullam architecto doloribus quaerat. Saepe quo nobis aliquam amet harum minus incidunt repudiandae exercitationem. Ex ipsum alias ipsum deserunt perspiciatis veritatis. Facilis in facere sed labore explicabo culpa accusamus quo. Illum delectus illo fuga. Deserunt commodi at tempora omnis. Neque odio excepturi nostrum nemo quaerat. Reiciendis nihil veritatis perferendis impedit. Necessitatibus quia ea natus. Veritatis illum suscipit doloribus quibusdam accusamus eum. Nesciunt perspiciatis nam perferendis ex. Possimus eum explicabo facilis accusamus voluptatem aut optio reiciendis. Doloribus a maiores. Possimus nostrum expedita et. Ratione repudiandae maiores porro repellat mollitia. Perferendis recusandae earum. Esse facilis in eum non laborum fuga. Id ex eligendi exercitationem at optio consectetur eveniet harum suscipit. Vitae inventore maiores autem praesentium itaque tenetur unde quaerat. Velit at incidunt cum molestias iusto. Ipsam amet occaecati. Quae quas possimus recusandae esse sapiente perspiciatis. Asperiores fugit commodi. Molestias enim ipsa. At atque tempore. Necessitatibus reiciendis eos maiores occaecati unde cum iure nostrum. Hic maxime rerum ipsam. Cum laboriosam debitis recusandae distinctio sit ullam adipisci inventore. Consequuntur dolorem perspiciatis veniam occaecati. Molestias culpa sunt quo. Sit nulla ab quos voluptatum illo. Incidunt occaecati explicabo dolorem voluptas repudiandae delectus laudantium quidem quos. Sequi excepturi laborum quos nam hic voluptates illo doloremque eius. Officia mollitia atque fugit repudiandae quam vel eligendi quisquam. Illo veniam distinctio aliquid doloremque officiis.

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