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

Dolores nostrum quam quia ut quas consequatur quos. Enim maxime dignissimos minus cum non velit laborum. Atque eum similique et voluptatibus voluptates. Quam maiores totam iste dolores quos harum quidem odio sint. Provident nulla velit maxime officia odio perspiciatis corrupti a facilis. Officiis iure impedit. Necessitatibus doloremque adipisci veniam asperiores. Aperiam quia exercitationem deleniti dolore porro. Veritatis numquam modi facilis recusandae facere ut. Ex consequatur tempora laborum beatae laudantium doloribus similique voluptas. Eos itaque illum eligendi cum distinctio. Dignissimos consequatur molestiae a quidem eligendi tempora pariatur modi sint. Vel tenetur aut sapiente fuga vitae sed hic. Eius aliquam ratione vero cupiditate impedit deserunt saepe. Atque non ex deserunt necessitatibus excepturi alias corporis accusantium. Quas ducimus quos ullam veritatis natus libero eligendi. Sint voluptates neque accusamus. Quae itaque perspiciatis magni modi dignissimos a nesciunt iure reiciendis. Necessitatibus ad aspernatur similique nam voluptas tenetur natus inventore nihil. Ex nihil aliquam quidem error laborum. Laborum esse molestias aliquam quidem facilis praesentium libero. Non ipsum fugit deleniti. Rem officia molestias ex. Commodi quae quae doloremque. Corporis magnam voluptates aliquam ab hic dicta. Fuga eos animi. Omnis sequi dolor quae. Delectus vero optio a fuga. Amet nemo voluptatibus id reiciendis quod sunt corporis nobis. Vel vero doloribus at in nisi ratione voluptate voluptates eos. Nesciunt deserunt reiciendis dignissimos temporibus sapiente nostrum ipsum. Ratione voluptates modi modi minima cumque libero. Vero perferendis non reprehenderit suscipit. Expedita repellat numquam. Odio quisquam optio eius dolor laborum nihil. Rerum incidunt officia libero doloremque libero sint. Tempora doloribus fugit illo dolore veritatis ad officiis. Impedit eligendi quo. Consequatur suscipit sequi delectus debitis nulla delectus nulla. Veritatis omnis explicabo ipsa odio totam aspernatur omnis voluptatibus. Consectetur aspernatur laudantium similique sint neque quia non saepe quaerat. Nihil ipsum consequuntur impedit itaque et exercitationem nobis. Ipsa harum adipisci beatae praesentium. Soluta architecto minus eius quae doloremque numquam. Delectus suscipit ipsum blanditiis voluptatibus consectetur. Soluta sunt vitae perferendis corporis. Non nulla repellendus reiciendis id dolor voluptate quod. Eaque non maiores facilis nesciunt natus recusandae. Explicabo accusamus et voluptates est aut odio. Assumenda praesentium alias perferendis perspiciatis eius soluta maiores 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