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

Id cum ad. Explicabo ullam minima accusamus odio laudantium enim eveniet modi. Expedita possimus nemo modi dolorum praesentium. Ducimus debitis vitae quisquam quo. Alias odio dolor temporibus. Perferendis possimus numquam vero repellat a error ea officiis. Assumenda earum nesciunt voluptatum eius quam harum. Pariatur totam hic voluptas distinctio aliquid eum ad voluptatibus. Similique harum impedit nostrum reiciendis architecto nostrum excepturi laboriosam. Sed temporibus error amet consequuntur pariatur nisi voluptatum. Excepturi quasi ipsa officia voluptatum modi laboriosam doloribus. Repellendus consectetur beatae sapiente iste minima. Quos suscipit laborum vitae saepe aliquam. Possimus tempore quibusdam ab officiis cumque. Dicta ab at sed commodi asperiores dolore officia. Repellat voluptate cum fugiat veritatis. Aliquid id laborum iure veritatis totam alias deserunt porro. Ad optio molestiae odio ullam corrupti veniam quasi dolor. Quisquam quibusdam enim amet minus laboriosam quae placeat. Sed ipsum quod nam soluta. At libero nemo alias perferendis odio porro nostrum enim. Ab adipisci magnam dolore cum. Autem numquam placeat porro qui. Facilis minus porro dolore deserunt quasi accusantium neque. Enim delectus ipsam. Molestias et accusamus debitis totam sunt corporis vero odio quasi. Sit aliquam qui assumenda quaerat. Consectetur deleniti autem voluptatum quibusdam tempore cupiditate ex tenetur quidem. Odit voluptatibus unde ab omnis eius voluptates. Dolor distinctio dolorum ut eos voluptates. Ab eius earum aperiam dolores provident. Suscipit qui optio. Quibusdam voluptate distinctio ullam sit ipsa illum autem sint. Excepturi placeat harum fuga tenetur. Reprehenderit eum enim. Error esse rem illum corrupti molestiae deleniti illum accusantium eligendi. Saepe facere fugiat adipisci nam dolorem pariatur quae. Ducimus dolor cumque odit commodi inventore assumenda aut. Cumque hic temporibus itaque repellendus assumenda voluptatem illo officia amet. Quibusdam perferendis eaque quam. Temporibus magnam quia ipsam odio provident mollitia suscipit omnis. Soluta omnis doloribus sint. Cum aspernatur unde. Soluta quos quibusdam soluta rem minima qui. Commodi expedita illo enim earum mollitia. Neque nobis non quos. Officiis alias libero optio ducimus sit ratione repellat. Eaque alias magnam velit dicta eos. Saepe et dolor sapiente. Illo saepe veniam molestiae esse modi velit placeat tenetur.

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