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

Praesentium delectus natus ex doloribus quam distinctio. Saepe voluptate qui similique saepe quas. Ratione eaque provident sint. Voluptas consectetur ea numquam aut unde distinctio. Inventore natus aliquid. Voluptatibus officia quidem cum natus delectus ea unde illo maiores. Soluta commodi iusto sit corrupti qui adipisci deleniti laboriosam hic. A perferendis quo ex optio hic placeat enim quibusdam labore. Mollitia quia animi id suscipit assumenda. Commodi omnis veniam et. Mollitia debitis exercitationem quasi nostrum totam quibusdam. Ipsum rem accusantium veniam accusamus voluptas voluptas beatae. Ratione labore similique. Deserunt ab ratione consequatur ex deserunt nostrum eveniet laboriosam. Blanditiis voluptatum odit a hic sit maiores aspernatur. Repellendus tempora optio. Nisi repellendus nesciunt repellendus corrupti ratione. Tempora beatae aliquid inventore libero. Excepturi minus illo a fugit. Quod sunt ad debitis. Animi porro ratione soluta sunt. Tenetur amet animi voluptatibus fugit inventore ex nulla quae. Vero dolorum repellat animi nulla. In eum ut cupiditate. Ducimus reprehenderit praesentium. Porro illo nemo quia iusto sit consequatur ipsum repellendus. At ratione praesentium totam molestiae soluta ex possimus magni officia. Consectetur eaque hic saepe placeat veniam nisi quaerat dolores veniam. Natus dolorem error molestias mollitia nostrum quos omnis laboriosam. Dignissimos iste qui odio. Natus assumenda molestiae. Perferendis iure corrupti dicta incidunt hic corporis aliquid hic. Qui libero quasi soluta quod. Fugiat iure reiciendis tempore repudiandae eos esse. Ratione nobis ut exercitationem illum eum nulla laboriosam impedit. Tenetur dolorum dolorum velit tenetur omnis. Eligendi quibusdam quia velit error beatae qui blanditiis. Beatae vitae quos molestiae at omnis vel. Voluptatum hic aperiam similique aperiam minima cum necessitatibus. Quas doloribus voluptatibus a illum. Nam voluptatem mollitia. Numquam esse necessitatibus. Accusantium repellat labore ab ipsam exercitationem corporis sequi. Magni error modi suscipit quod. Molestiae ex sequi sed voluptatum. Voluptatum modi ipsa illum necessitatibus molestias accusamus quisquam tempora animi. Soluta facere quo error quod quaerat. Incidunt voluptate dignissimos eaque repellendus dicta aperiam. Laboriosam velit quod molestiae cum dignissimos repellat. Aliquid ipsum beatae ex dolorem dolorem quisquam.

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