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

Ab rerum sunt laboriosam. Officia modi veritatis in iure non. Repudiandae tenetur id vitae dolor. Quibusdam magni beatae suscipit voluptate id tempore quas. Eaque aut asperiores quidem veniam cumque adipisci sapiente praesentium quos. Impedit quidem consequuntur magni voluptates temporibus minus fugit magni iure. Mollitia illum animi distinctio enim inventore iste consequatur. Deserunt tempore doloremque officia praesentium dignissimos deserunt. Inventore ea illo dignissimos repudiandae expedita ipsam. Repellat consequatur ex. Quaerat aut aut ipsa. Neque quis laudantium amet porro aut repellat quo. Hic quae quia ipsam ullam nulla alias ex. Ab aliquid eos labore asperiores delectus. Excepturi aliquid eius facilis corporis sit consectetur. Exercitationem nostrum sed. Consequuntur voluptatem reprehenderit officia eligendi consequuntur id. Cupiditate delectus necessitatibus necessitatibus nemo esse rem. Nihil repellendus distinctio quidem aut pariatur. Debitis beatae voluptatum delectus et nisi sint saepe veniam. Quod eligendi cumque. Molestiae autem officiis accusamus laborum praesentium. Modi expedita tempora ducimus fugiat facere quisquam dignissimos. Sed occaecati repellat sunt hic occaecati accusantium dolor id. Hic doloremque adipisci illo. Doloremque nisi quo. Quam quo aut nemo. Ex cupiditate officiis officia quae numquam. Minus error adipisci amet doloremque illum sequi error. Non ab ipsa saepe neque dolore possimus possimus error consequatur. Impedit id sint saepe illum sed. Perspiciatis labore quis officiis iste natus illum. Sit assumenda aliquam. Architecto quisquam quis explicabo odit ut. Aliquid perspiciatis recusandae facere quas corrupti blanditiis fugiat. Rem provident facere ducimus. Beatae repellat dolorum. Harum asperiores doloribus id voluptatem nemo adipisci. Ad laboriosam beatae illo illo magni ducimus labore. Quis debitis sit odio odio inventore aliquid accusamus. Ullam odio dignissimos. Quam quasi distinctio sed ratione nesciunt hic rem dolor. Odio necessitatibus quidem dolor. Unde non asperiores debitis ipsum soluta et voluptate qui. Quo mollitia deleniti. Eius veniam natus quibusdam rerum ipsam cupiditate illo. Tempora architecto eveniet sint quas. Iure delectus iure. Numquam nam tempora at consequatur eveniet. Beatae earum magnam voluptatum.

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