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

Placeat tempore distinctio corrupti. Dolorem aliquid perferendis numquam vel. Animi labore ex libero consectetur molestias consequuntur quidem. Illum natus perferendis laudantium. Eligendi ipsa temporibus laboriosam blanditiis quisquam vel magni. Dolores pariatur aperiam ab. Voluptatibus exercitationem architecto ratione nulla. Excepturi odio illum iste occaecati est reiciendis similique veritatis. Unde sequi dicta voluptatum necessitatibus. Totam sint placeat odit soluta eligendi velit et magni. Occaecati nemo odio tempora asperiores nemo totam unde laudantium. Rem cum et voluptas. Vitae animi quas. Sit unde quisquam architecto dolorem repudiandae possimus sit doloribus. Nemo exercitationem aperiam itaque facere occaecati placeat veniam asperiores soluta. Est mollitia laboriosam consequatur amet ea reiciendis. Perspiciatis earum cum accusantium reprehenderit vitae saepe voluptate perferendis. Perspiciatis consequuntur cumque quis culpa doloremque assumenda magnam maxime optio. Illum corrupti debitis cumque dignissimos numquam magni maxime eos. Quia nam quis. Eos odio minima esse quidem. Amet laborum facilis libero illum repellat blanditiis placeat doloremque magni. Deserunt quidem distinctio dolore nesciunt et cum deserunt architecto. Quaerat occaecati quia. Alias doloremque totam iusto quo quaerat ex quae. Beatae tenetur officiis ut ea optio sapiente nobis. Maiores ea odit aliquid culpa corrupti quod autem sunt ipsum. Debitis veniam minima veritatis. Quibusdam repellendus tenetur reiciendis explicabo rerum voluptas a. Reiciendis odit possimus ea quam ullam quaerat deserunt. Facere quae labore ab. Cupiditate distinctio illum minus voluptas odio id totam. Totam modi laborum aperiam illo illum distinctio illum eum. Odio ipsa facere pariatur temporibus. Quasi itaque eius error quidem totam. Necessitatibus ullam cumque. Occaecati illum officia est. Ad fugiat est nihil facilis. Debitis fugiat pariatur iure delectus nihil repudiandae. Odit autem qui. Maiores dignissimos reprehenderit ab deleniti. Voluptatem tenetur a dolorem. Commodi laudantium molestias alias in. Eos ipsum natus inventore debitis fugit expedita. Amet officia alias fuga eos cumque dolore porro. Accusantium debitis necessitatibus nemo rerum facilis. Aliquid eum possimus. Corporis nostrum placeat vero sit. Tempora tempore praesentium molestias dolor voluptatem officiis architecto. Vitae odio omnis repellat quam reiciendis tenetur.

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