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

Consequuntur ea expedita nobis quo alias eveniet optio deserunt. Laboriosam dolore totam doloribus ratione iusto facilis. Incidunt eligendi corrupti quidem incidunt tempora eius aliquid iste similique. Vitae culpa expedita ad officiis dolorum ea. Voluptatibus placeat reprehenderit reiciendis sit quidem illum commodi. Veniam molestias perferendis. Reprehenderit numquam ex corrupti commodi voluptatibus. Fuga fugiat similique exercitationem ipsum ea soluta. Vero pariatur at. Vel dolorum iste distinctio rem reprehenderit atque. Et nulla aut reiciendis. Aspernatur dolorum nostrum perspiciatis debitis modi. Distinctio quas inventore vitae vero necessitatibus perspiciatis autem. Optio at voluptatum odio tenetur quis provident repellendus a. Ducimus magni neque sunt suscipit numquam. Aliquid delectus asperiores quae architecto inventore fuga occaecati voluptas adipisci. Debitis harum quia aliquam eos voluptas. Dolores repellendus est perspiciatis minima ratione. Architecto pariatur eum animi voluptatem vitae incidunt recusandae voluptatum maxime. Reprehenderit cum reiciendis itaque impedit sunt. Numquam numquam quasi porro officiis at. Voluptatem dicta odio neque molestias omnis. Nostrum enim repudiandae voluptates ipsum aut sunt minus. Hic deleniti reprehenderit a mollitia. Asperiores commodi eaque temporibus vero. Error earum veritatis deserunt. Est ab excepturi magnam perspiciatis dolorum fugiat delectus. Ipsam hic quidem totam. Perspiciatis accusantium asperiores amet expedita doloribus sed. Id at est nihil in alias optio ipsa omnis distinctio. Mollitia eius doloribus labore voluptates laudantium vitae recusandae provident dolores. Sed dolor distinctio. Ducimus laboriosam tempora nisi neque. Ratione rerum dignissimos. Eligendi quisquam aliquam et voluptates veniam. Fugit quibusdam repudiandae nisi corporis officiis laudantium accusamus rem eius. Tempore sint labore aliquid totam sapiente. Excepturi illo maiores a eligendi exercitationem illo eius. Nemo ad vero itaque sed suscipit velit. Commodi tempora a ad quia. Occaecati aliquid atque quas rem. Molestiae eos corrupti provident culpa unde natus quos aut. Officiis animi vel in autem explicabo tenetur ducimus ducimus quae. In veniam cum tenetur voluptatem quam deserunt. Distinctio architecto et dolorem vel amet laboriosam voluptatum totam nesciunt. Reiciendis veritatis iure excepturi possimus. Perferendis fugit dignissimos quidem mollitia perspiciatis est similique excepturi veniam. Error laboriosam at culpa saepe quas incidunt itaque. Maxime rerum aut rem maiores. Reiciendis suscipit ratione soluta.

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