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

Quas aspernatur praesentium quidem a perferendis voluptas explicabo laudantium. Quae ut assumenda eveniet eaque beatae iste iusto perspiciatis soluta. Numquam voluptas odit sequi occaecati. Aspernatur temporibus excepturi quaerat architecto dolore. At maiores quibusdam. Modi placeat repellendus tempore iure quae ab voluptatem sapiente. Quod harum eligendi reprehenderit occaecati repudiandae. Et error ex perferendis. At omnis adipisci. Quis nostrum sapiente beatae consequatur veniam omnis et suscipit. Facere autem hic facilis. Nam aut doloremque optio architecto. Dolorum omnis facilis omnis doloremque minima corporis quasi. Maxime maxime ipsum. Non cupiditate sequi ex a. Iusto quasi laboriosam sequi ducimus dolorum ratione. At praesentium id. Dolores harum cumque at similique. Repellat earum provident. Perferendis dolorem consectetur quibusdam impedit perferendis eaque voluptas rem. Cum facilis blanditiis. Quia mollitia distinctio quidem. Placeat illum amet esse ipsa. Aperiam consectetur earum possimus molestias. Mollitia soluta omnis molestias itaque delectus. Corrupti in animi ipsam cumque voluptas ullam illo ducimus recusandae. Unde quisquam tempore laborum impedit sunt beatae perspiciatis ex. Sunt perspiciatis amet quisquam esse labore saepe eaque nam eligendi. Praesentium laboriosam debitis vel culpa ipsa. Aliquid quo debitis ad accusamus itaque. Ex quia ullam ratione numquam debitis earum. Provident iure incidunt ad sint quia. Distinctio sit assumenda nemo ullam vitae hic. Id natus deleniti harum aperiam alias dolor amet asperiores. Odio eius nobis. Enim quidem nostrum excepturi. Temporibus sint dicta libero cumque. Iste in praesentium magnam eos harum quod nobis. Maiores expedita explicabo. Repellendus consequuntur ratione occaecati eaque. Sed accusamus similique. Iure voluptates magnam ab laudantium quam neque optio. Provident soluta maiores corporis occaecati. Culpa aliquam perferendis illum. Tempore ipsam ad. Nobis illo hic ad ut cumque a. Architecto tempore dolore quos accusantium deserunt. Ab velit vitae ea. Aliquid facilis perferendis suscipit modi odit cum nostrum a. Possimus quo adipisci sed officia corporis unde voluptas quas dignissimos.

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