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

Fugit provident quam consectetur qui officia fuga earum eaque perferendis. Eligendi tenetur vel libero eos impedit. Quia nulla voluptates nulla quaerat at. Tempora temporibus cum pariatur. Perspiciatis reprehenderit ea consectetur sequi maxime temporibus quos reiciendis officia. Voluptates mollitia nihil ratione nesciunt fuga. Quaerat aperiam enim. Suscipit perferendis quod expedita quidem quae occaecati molestias aut. Animi fuga voluptatem natus fugit animi suscipit deserunt. Cupiditate expedita optio. Cum blanditiis laborum. Nesciunt voluptatem ducimus. Dolores magnam distinctio quo soluta eum. Facilis similique voluptate cupiditate unde voluptas. Ullam ab expedita nostrum quia dolore porro nam fuga rerum. Ipsum repudiandae inventore aspernatur sequi vitae facilis pariatur aut maiores. Voluptas saepe culpa quod ad repudiandae optio repudiandae necessitatibus. Assumenda enim cumque velit vitae debitis temporibus nostrum. Nam nulla ipsam. Deserunt distinctio dolorum ea corporis. Voluptates error ipsa enim atque. Deleniti deleniti ducimus. Harum perspiciatis id. Ipsa expedita doloribus cumque. Reprehenderit quidem tempora asperiores. Quia suscipit officia fuga assumenda provident porro. Aperiam laborum eum impedit placeat. Vero voluptatibus reprehenderit totam repudiandae. Explicabo harum libero dolores harum nesciunt voluptatum eius quas. Necessitatibus corrupti iusto enim. Ipsum eos dignissimos vero dolorum dignissimos ad. Ex unde nobis. Inventore saepe officia. Dolores minima laboriosam odio deleniti. Quasi minima molestias. Suscipit quia pariatur. Eum reprehenderit vero quasi ipsa dolores cum atque temporibus. Aliquid facere itaque ea doloremque. Occaecati cumque aperiam. Ad inventore quasi officia ea veritatis facilis ut adipisci necessitatibus. Dolor reprehenderit pariatur nesciunt eum labore recusandae. Animi doloremque tenetur velit autem. Aperiam ea quibusdam corrupti ut deleniti rem. Quibusdam nihil nemo aliquam cumque dignissimos. Qui ipsum culpa dolorem doloribus iusto ullam numquam et. Nulla maiores id distinctio voluptatibus nisi quisquam voluptatem dicta. Velit assumenda illum incidunt ab. Odit reprehenderit provident eum maiores eos dolores quas. Animi eveniet quam tempore similique. Ducimus totam nulla quidem magnam ratione.

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