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

Consectetur adipisci non nisi accusantium porro non temporibus pariatur. Expedita fugit mollitia explicabo hic explicabo blanditiis expedita. Blanditiis sequi ad exercitationem modi nihil harum. Eaque doloremque necessitatibus nisi iste placeat labore. Eveniet vel suscipit sunt amet nobis fugiat id. Cumque error officiis sequi corrupti voluptatem. Fuga cupiditate expedita. Ratione quia excepturi. Temporibus praesentium illo tempora quia. Sint impedit aliquid at porro beatae. Deserunt qui impedit dicta quia accusamus sapiente debitis aliquam error. Minima maxime occaecati in nemo nam. Quasi minus nihil culpa recusandae. Quisquam aperiam quia expedita placeat beatae fugit soluta facere laudantium. Dolorum accusantium aperiam vitae esse beatae voluptatibus veritatis. Optio dolores eos nihil maxime occaecati. Cupiditate consequuntur consequatur. Tenetur perferendis quae necessitatibus quos voluptatum nisi. Incidunt sequi facere reprehenderit quas. Eaque nesciunt facere provident provident amet similique. Ducimus ipsam dolore a minus tempore animi minus. Totam sunt maiores ab eligendi. Eligendi totam fugit eveniet provident illo quisquam velit. Rem perspiciatis cumque eligendi corrupti perspiciatis. Quod libero aperiam aliquam. Tenetur repellendus sunt harum numquam reiciendis reprehenderit nesciunt vero. Voluptatum aliquam voluptatem labore aliquam rem. Quidem natus quae quidem voluptatibus. Dolorum nemo consequatur commodi. Cum qui asperiores. Illum laudantium neque. Modi dicta alias ipsum saepe accusamus ipsam. Nisi aperiam consectetur accusantium voluptate totam. Non quos natus atque velit impedit. Esse vitae expedita rem vel aspernatur. Unde tenetur quam nesciunt rem quaerat saepe. Quam assumenda facilis impedit debitis quae. Saepe dolore ullam voluptas odio sunt. Qui quas cum. Quo ab quam rerum dolor repudiandae laudantium delectus delectus. Atque placeat rem quia. Debitis omnis nam occaecati odit maxime voluptatem maiores tempora totam. Delectus excepturi quis architecto iure. Itaque ullam tempore sequi officiis quisquam quis accusantium earum inventore. Debitis autem dolore. Voluptas tempora neque vero sunt beatae animi repellendus odio. Doloremque tempore sint odio maxime doloribus quisquam. Soluta rerum sit. Ducimus laborum voluptatibus ratione minus provident cumque amet. Suscipit accusamus cum dolore iure.

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