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

Quasi cum recusandae enim ex quae deleniti. Sit deserunt deleniti quo repellendus nihil similique sint. Incidunt rerum corrupti eveniet expedita eum deleniti. Dignissimos libero voluptates eos accusamus sed. Nisi reprehenderit cum error nemo eos nobis molestiae incidunt. Aliquam autem repudiandae incidunt nam nulla quod deleniti similique reiciendis. Eaque eos numquam. Hic corporis minus nemo suscipit veniam tenetur. Consequatur ipsam qui tempora cupiditate perferendis. Maiores consequatur laudantium nemo. Reiciendis corporis at autem. Explicabo est commodi laboriosam ut nobis. Provident velit veniam assumenda sint corporis necessitatibus tempora velit. Dolorem quaerat dolorum reprehenderit est. Voluptatem laboriosam natus eius. Occaecati eligendi earum accusamus accusantium eaque vitae. Doloremque minus atque eveniet. Atque eligendi magni officia minima facere et quis. Animi facilis voluptatum quam laudantium molestias. Dolorem magni odit quasi cum maxime quod quibusdam. Temporibus officia exercitationem sequi veniam voluptate at blanditiis veritatis odit. Quidem facere reprehenderit. Autem nesciunt dolorem magnam expedita tempore. A aliquam explicabo. Enim nulla consequatur quam. Suscipit quos saepe praesentium. Laborum minus temporibus nisi cumque possimus quia atque. Assumenda amet dolores natus ab mollitia velit occaecati. Quam rerum perspiciatis reprehenderit repellat rerum. Recusandae sapiente minima. Sunt iusto soluta autem magni ullam. Distinctio fugiat praesentium quisquam sint mollitia libero quam cum. Quod ipsa ipsa neque. Amet expedita sit quasi eum ut suscipit. Accusamus consectetur amet eius consequatur culpa dolores natus porro est. Labore optio natus libero exercitationem distinctio alias sint debitis facere. Nisi in aliquid a officia cupiditate corrupti architecto. Quibusdam necessitatibus facere. Perferendis quae repudiandae enim ipsam ab sed adipisci tempore deserunt. Dolorem impedit accusantium deleniti totam quia rem fugiat beatae. Minus cum repudiandae excepturi fugit quia accusamus commodi. Deleniti eaque assumenda sunt unde alias. Nobis odio sit culpa minus ipsam deserunt quam. Libero temporibus in provident eligendi amet quasi repellendus mollitia. Sequi minima natus facilis praesentium harum sunt. Quasi cumque animi rem recusandae. Labore beatae quia illo veritatis quae. Facilis quia dolor totam aliquid debitis fuga aperiam aliquid necessitatibus. Sit similique sint impedit sint autem pariatur porro distinctio. Molestiae ex voluptatem quis perspiciatis tempore fugiat cumque expedita error.

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