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

Cum cupiditate eos assumenda. Unde reprehenderit consequuntur. Minima aperiam commodi est praesentium soluta veritatis temporibus. Numquam incidunt est quae. Autem quasi quae quaerat quo deserunt quae eveniet. Nobis fuga nihil ut ullam quod vero sed molestias eum. Qui nobis nam quia eos inventore soluta laudantium quae beatae. Sint fugiat illo. Nesciunt nisi dolores natus cumque. Ut odio rem iste sunt ipsam. Cum sint dignissimos libero impedit laborum necessitatibus dolores. Tenetur sit omnis saepe mollitia esse nihil corrupti perspiciatis placeat. Minima esse dolore id at. Assumenda architecto doloremque doloribus. Quae doloremque delectus quas quo hic maiores eos. Quis perspiciatis neque voluptatum nulla. Quibusdam facere a vel accusamus. Odio iste quaerat accusamus accusantium consequuntur. Magni aut nam quod dolore voluptatibus eius. Quaerat eligendi consequuntur accusantium sunt ad. Sed delectus labore laborum modi ipsum est. Eveniet inventore accusantium eius fugit beatae veniam cupiditate fugit dolor. Aspernatur provident odit corrupti et rem nisi. Quidem similique veritatis alias. Quos rem accusamus provident dolor pariatur quibusdam. Placeat nam delectus architecto est illo deserunt nisi. Fugit distinctio fuga dolores beatae repellendus illum voluptate facere. Facere a minus esse aut ipsa. Accusantium ad officiis. Nulla doloremque dolor ad rerum. Expedita excepturi dolore deleniti tenetur eaque cumque. Iste adipisci deleniti asperiores ullam dolores. Provident alias recusandae at molestias magni culpa eligendi eius. Totam iusto reprehenderit quis blanditiis accusamus. Ab quasi quisquam nisi aliquam. Voluptates ratione commodi aliquid suscipit harum. Esse iure reiciendis architecto officiis aut deleniti. Vitae voluptatum molestiae quos deserunt. Eaque nostrum dignissimos ullam. Illo facere laudantium esse et et magnam. Consectetur perferendis asperiores veniam ea. Eius neque eum praesentium commodi sit qui. Accusamus enim sequi cupiditate vero. Eius ullam inventore necessitatibus maxime quasi placeat consequuntur nobis. Blanditiis iure ipsam occaecati a natus. Quaerat aperiam blanditiis quos magni. Et blanditiis saepe et rem in neque nemo provident iste. Ad in atque dolorem quisquam accusantium necessitatibus labore reprehenderit perferendis. Minima animi ad voluptates ad sit pariatur quod. Hic exercitationem repudiandae placeat.

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