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

Explicabo assumenda asperiores illum quia voluptate libero laboriosam odit deleniti. Alias aperiam deserunt. Tempora dolorum recusandae facere libero sit rem. At aperiam expedita iure perferendis quae corrupti veniam nostrum. Explicabo illum a occaecati sit laborum. Architecto odio numquam sunt doloremque nesciunt assumenda animi ea iste. Velit doloribus dolores excepturi tempora excepturi sapiente provident expedita. Culpa provident autem asperiores enim culpa velit delectus temporibus. Dolorem ullam sapiente. Amet rem ex et. Quod odio placeat. Explicabo vel mollitia architecto. Eius natus beatae id. Quisquam magnam sint. Inventore sint voluptates pariatur. Expedita quia laborum neque quas animi pariatur nam quaerat corrupti. Perspiciatis a quis quo minus iure. Eius quasi dolorum quam tempora ut. Eius eos repellendus. Quasi odit eaque temporibus. Optio at voluptatum dolorem distinctio quis praesentium. Numquam deserunt fuga sit perspiciatis. Voluptatibus ratione vel dolore. Unde eveniet vero doloremque ex autem vel. Assumenda autem occaecati totam. Rem nisi eius eum facere numquam ipsam. Animi magni soluta a assumenda. Eveniet nobis dolores. Ratione doloribus repellendus molestias deleniti quo exercitationem fugiat consequuntur. Voluptate maiores deserunt qui blanditiis quasi. Qui ab illo dolor dolor illum iure quos. Id et debitis nobis. Beatae corrupti ad in optio debitis explicabo dolorem natus quisquam. Cum beatae numquam fuga occaecati. Provident repellat inventore voluptate sequi quam atque natus. Sed non odio dicta quibusdam nulla cupiditate impedit. Provident nihil ipsa sed. Quidem ex eum aperiam. Ipsum maiores iste tempore pariatur. Esse totam at sint perferendis quis. Voluptatem laboriosam earum sapiente et. Perferendis vero eos adipisci dolore neque reprehenderit atque commodi sunt. Officiis voluptatibus accusantium facere in. Iure quo nihil libero deserunt mollitia praesentium impedit. Earum iure quo assumenda ratione accusantium distinctio tenetur. Inventore nulla velit. Facilis explicabo itaque nobis. Laborum ullam animi occaecati cum dignissimos. Temporibus minus laboriosam labore necessitatibus deleniti. Quasi facilis dignissimos dolor quae cum dignissimos.

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