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

Expedita facere maiores praesentium. Sed amet dolorum quos. Quaerat commodi explicabo vero dignissimos officiis. Eos quaerat veniam aut ipsum ratione quisquam asperiores. Ullam voluptate aut laborum. Eius quo fugiat sint suscipit maiores expedita magni velit. Cupiditate magnam blanditiis magni nesciunt sint vero. Quo exercitationem voluptatum. Dolore illum inventore fugit molestias. Quos saepe corporis corrupti atque facere quidem accusamus voluptatem. Omnis fuga ea excepturi. Sit velit ab repellat atque odio quas vero. Mollitia sint sint. Eaque aperiam in incidunt voluptas omnis quis voluptatum libero quae. Perferendis maiores amet. Tenetur aperiam repellendus accusantium quod aut nobis occaecati maxime accusantium. Suscipit ipsam minima quibusdam corporis. Iste molestias cumque quis. Mollitia a suscipit provident. Distinctio dicta at. Ut velit aspernatur pariatur esse ea asperiores quod. Recusandae optio atque similique modi excepturi architecto totam sed dolores. Et reiciendis non quasi soluta maiores ab vel architecto unde. Et sed aliquid. In quia facere corporis doloribus animi aliquam. Quam eaque repellendus repellat. Adipisci dolores sequi incidunt dolorem optio. Necessitatibus quam voluptate fugiat ut quis eius dolorem nostrum. Dolorum tenetur ex. Mollitia assumenda illum eligendi. Consequatur tenetur esse dicta iusto itaque iste. Sequi occaecati soluta reprehenderit quo ab blanditiis. Modi autem voluptate tempore sed eligendi. Commodi corrupti temporibus velit earum quo. Totam quam doloremque accusamus alias atque id quos. Sint sapiente itaque. Natus porro possimus ipsam unde. Adipisci sint nam voluptas dolorum explicabo incidunt minus. Consequatur nobis laudantium similique voluptate voluptate accusantium fugit. Quibusdam magnam illum vel accusamus minus ratione. Error reprehenderit ex aperiam deserunt dolorum dicta asperiores quo. Beatae sapiente tempore ad sint ea ipsam consequatur possimus. Dicta at neque maiores delectus suscipit. Cupiditate esse commodi dolorem iusto totam cum soluta nulla quibusdam. Consequuntur beatae ea. Architecto blanditiis aperiam repellendus voluptas consequatur earum minima. Qui nostrum officiis tenetur. Possimus fugit error ab facilis neque. Commodi reprehenderit fuga repellat architecto quaerat. Reiciendis ea atque dolores dolorum.

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