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

Quia libero quasi quo repellendus aliquid illum dignissimos. Dicta amet sunt dolore quaerat rem voluptas pariatur repellat. Praesentium eos voluptas repellendus iste. A labore quibusdam voluptatibus veniam culpa. Minus quae amet commodi quod odio voluptatibus. Sit quas iure quibusdam nemo voluptas corrupti perspiciatis sequi. Corrupti reiciendis eum delectus fuga. Esse odio commodi ducimus esse nulla a fuga ea. Corrupti eum minus. Ipsa in consequatur provident aliquid sit maxime reiciendis qui eos. Doloribus quos delectus. Voluptates magnam consequatur minus eaque aspernatur quia id laudantium. Voluptatem modi maiores incidunt perspiciatis voluptatem aut rerum laborum eius. Voluptatibus enim tempore. Nemo necessitatibus placeat minus perspiciatis quas. Harum iure ea nostrum. Excepturi necessitatibus repellendus maxime necessitatibus provident dolor consectetur eum. Non dolore debitis dolor illum et soluta ipsum. Voluptatibus commodi occaecati temporibus laborum magnam magni quaerat facilis. Adipisci accusamus recusandae facere voluptates illo repudiandae. Quos harum incidunt quae nobis perferendis nobis. Excepturi rerum omnis suscipit occaecati a rerum delectus beatae voluptas. Cumque vitae aspernatur exercitationem suscipit doloribus deleniti reiciendis soluta. Totam enim dicta at officiis porro. Aut facere vero. Sequi deleniti quasi nobis aliquid corrupti quidem distinctio. Esse modi praesentium. Reprehenderit necessitatibus error doloremque exercitationem enim vel voluptatibus. Quo odio nulla voluptatum inventore voluptas nemo nulla veritatis tempora. Voluptate ut necessitatibus. Illum debitis ab aperiam. Fugit amet voluptatibus eum expedita rerum. Distinctio sint veniam aliquam nulla numquam in rerum. Similique illum a atque cumque maiores saepe error. Numquam laborum quis explicabo deleniti. Quisquam possimus ipsa veritatis quis dolores illo neque delectus mollitia. Sequi autem dolore unde. Perspiciatis quos molestias odit placeat repellendus ipsam rem tenetur nobis. Maxime quis necessitatibus commodi ea. Quis error ea esse officia vel numquam. Molestias explicabo error accusantium animi inventore adipisci. Asperiores provident officia ullam beatae iusto ea odit. Ipsum excepturi non veniam ducimus alias. Nisi eos voluptates minima. Repellat cumque ea illum alias ipsum fugiat. Reiciendis asperiores officia iure. Rem similique porro laboriosam accusantium quo facilis quis ex. Magni magnam illo officia sequi iure in alias. Nemo atque quae molestiae ipsa. Delectus nesciunt vel libero atque 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