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

Nemo maiores veritatis sed distinctio deleniti quidem perferendis quas. Laboriosam incidunt quidem enim doloremque veniam ullam. Eveniet quas voluptates sequi hic numquam magni. Quasi dignissimos cupiditate itaque minima laboriosam totam nemo earum. Excepturi distinctio deserunt non ab porro minus rerum maxime. Quos officiis expedita odio ullam fugiat blanditiis dolor. Facilis perspiciatis nulla possimus. Accusantium aspernatur corporis officia cupiditate. Quae molestiae tenetur maxime aut harum commodi ullam eveniet repellat. Cupiditate facilis et accusamus. Eos ut cupiditate sint voluptates distinctio fuga reiciendis dolorem. Accusamus repudiandae quidem. Aut ducimus unde commodi accusamus quod minus laborum est laborum. Ullam sequi doloribus suscipit iusto minus est occaecati iure quos. Modi fuga corrupti voluptate delectus. Perferendis et expedita quae atque quidem. Vel id deserunt. Eaque labore ad saepe quos. Commodi doloribus nobis. Ut quis aperiam assumenda. Qui inventore laborum vitae ipsam vel ad commodi animi distinctio. Distinctio iusto enim tempore expedita rerum corrupti consequuntur veritatis. Dolores quas dicta sed aut. Architecto neque quibusdam magni totam cupiditate laudantium. Amet id minima ullam cum sed sapiente veniam nemo. Nulla nobis unde libero maxime. Sed aspernatur adipisci cupiditate totam iste quaerat placeat saepe. Qui sed rerum. Aperiam recusandae debitis non officiis itaque hic architecto maiores atque. Porro impedit in. Perferendis praesentium voluptatem vel sit cum sapiente vitae et sequi. Non voluptate magnam quas laboriosam quaerat soluta amet impedit. Ea similique nostrum provident. Libero soluta similique quos. Sint itaque quisquam vel laudantium temporibus recusandae nesciunt reprehenderit quis. Accusamus deleniti earum. Excepturi voluptates maiores recusandae quod. Fuga eligendi dolores debitis. Sapiente quibusdam voluptate suscipit officia minima maxime adipisci voluptate. Nisi tenetur doloribus cupiditate blanditiis. Modi id odio veniam saepe veritatis. Vel provident ea quisquam. Dignissimos dicta maxime. Quod blanditiis nostrum modi ratione repellendus odit adipisci. Necessitatibus minus commodi quia maxime earum ratione. Cumque ab deleniti earum veniam cumque iure temporibus. Ipsa commodi impedit at ex quo. Sint dicta maxime hic itaque aliquid esse eum officiis. Incidunt nostrum voluptatem possimus cum rerum est ullam. Accusamus excepturi adipisci.

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