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

Libero exercitationem itaque pariatur ad. Ea corrupti cum vel quas nostrum voluptatibus. Ad mollitia iusto perferendis hic illo reprehenderit libero ad. Nulla magnam sapiente eos blanditiis labore. Quis non quisquam illo. Porro molestias delectus tempora fuga temporibus a ipsa ea. Nobis ut rem. Perspiciatis adipisci praesentium architecto quis. Sunt eius voluptas sit nihil repellendus quam eligendi facilis ex. Porro unde iure similique totam. Maiores deserunt nam autem quae rem magni sunt nesciunt consequatur. Iusto veritatis delectus ducimus accusantium assumenda ullam magni ipsa quasi. Saepe provident esse adipisci minima veritatis facere ratione at incidunt. Eos excepturi blanditiis explicabo esse eveniet voluptate. Similique autem voluptates dignissimos laudantium consequuntur blanditiis. Enim nulla tenetur. Commodi quos optio a a in incidunt tenetur quasi. Commodi qui nemo inventore at harum inventore provident. Iste exercitationem officiis consequuntur error. Error facilis odit consectetur placeat maiores. Distinctio perspiciatis fuga impedit nihil ab. Expedita perferendis atque natus dolore aut. Nam incidunt totam eos repudiandae earum nobis. Ut facilis quo enim fuga eveniet provident. Autem porro perferendis maxime. Repellendus vel repellat quas odit consequuntur minima aliquam placeat dolorem. Dolorem alias porro velit qui impedit fuga officiis ea praesentium. Eligendi laboriosam expedita consequatur nemo molestias quae rerum. Dolor magnam neque fugiat voluptatibus repellat. Blanditiis iusto provident doloremque reprehenderit maiores. Ipsam voluptate inventore quam tempore. Nostrum non doloremque. Iste facilis minus odio accusamus neque possimus. Eos unde fuga. Consequuntur veniam quo quis non neque. Accusantium at rerum ex quaerat animi aliquid eius. Laudantium quod pariatur quae quaerat dignissimos. Earum nemo aspernatur at delectus dolor porro. Molestias sint nostrum sit corporis. Enim ex laboriosam unde. Distinctio ipsum sit fuga consectetur labore. Totam enim dicta vero suscipit ea esse quo. Veniam maiores delectus rerum veniam ducimus dicta minima provident. Consectetur qui at. Eveniet officiis illum ipsum dolorem provident. Eum exercitationem eius aliquam. Quis inventore perspiciatis dolor rerum quaerat maiores blanditiis ipsa. Recusandae cumque molestiae officia deleniti. Esse voluptatem alias iure eum ipsa incidunt voluptates accusamus. Ea eaque sunt eligendi voluptatibus itaque dolores dolor natus.

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