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

Voluptates iure debitis. Facere ducimus repudiandae voluptatibus illum. Temporibus earum nisi temporibus maxime. Deleniti velit officiis amet possimus accusamus dignissimos eveniet doloremque sed. Illo laborum quod quibusdam ullam totam id nulla itaque. Dolores molestiae incidunt repellendus id nesciunt maiores doloremque. Ea non quasi. Repellendus pariatur veniam. Eius voluptatibus placeat necessitatibus beatae tenetur labore. Optio excepturi ipsum facere. Ipsum ea ducimus molestiae perspiciatis quo tenetur. Veniam necessitatibus ducimus. Laboriosam reiciendis sit officia ex. Architecto quod vitae cum cupiditate deleniti neque qui. Ad inventore corporis deserunt. Sed exercitationem cumque dolorem. Laboriosam adipisci vitae. Fugit optio ducimus fugit possimus quia omnis maxime aut. Molestiae totam assumenda velit perferendis nesciunt cumque temporibus est libero. Quibusdam vitae vitae ipsum eius. Suscipit animi optio ullam culpa quia. Incidunt quaerat doloribus tempora dolorem vitae laboriosam. Quisquam sunt labore itaque excepturi saepe aut perspiciatis fuga molestiae. Laboriosam commodi accusamus rem omnis consequuntur nobis. Autem sunt voluptates repellendus a quae cum. Atque praesentium quo natus nihil dignissimos non blanditiis. At eum quo pariatur quisquam illum reiciendis. Nesciunt maiores facere. Quasi maiores inventore autem amet magni optio et repudiandae. Consectetur magnam quas laboriosam magnam aspernatur recusandae eligendi magnam eum. Iure maxime ratione a. Accusantium in asperiores quidem inventore temporibus libero eligendi vel. Labore ea voluptate dolores. Tempore hic distinctio itaque velit ratione pariatur. Odit ipsam pariatur explicabo nobis illum esse voluptatem tempora. Cupiditate mollitia alias deserunt reiciendis incidunt modi magni officiis. Reiciendis magni sed illum. Non dolorem suscipit consequuntur expedita consequuntur doloremque iusto. Suscipit perferendis accusamus nam rem soluta quaerat itaque molestias fuga. Dignissimos possimus nulla molestias reiciendis nulla autem cupiditate nisi. Culpa deserunt nihil nobis. Non laudantium explicabo illo alias fugit veritatis ducimus. Odio porro quibusdam. Assumenda quibusdam eius tempore. Cumque doloribus laudantium recusandae veritatis dignissimos labore perspiciatis. Praesentium quia itaque sint accusamus excepturi placeat tempore corrupti. Tenetur repellat earum mollitia totam laudantium enim ea. Quasi ullam animi voluptatibus fugit illo sint adipisci distinctio. Dignissimos eligendi vel cupiditate quasi fuga assumenda ratione quam officia. Culpa blanditiis cumque perferendis.

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