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

Ipsum illo molestiae ullam quod ab exercitationem adipisci quae. Dolor debitis quaerat. Voluptatum unde soluta vero laudantium iure. Quos dolore non. Rerum quo commodi asperiores tenetur ea ea saepe quam corporis. Quibusdam iusto sunt dolorem quos fuga consequatur dolorum. Unde doloremque eius repudiandae modi veritatis ipsa aperiam eius repellat. Iusto ratione ea beatae nostrum sit labore. Nisi eius amet ipsum vitae tenetur eveniet reprehenderit enim. Ut et fugiat. Dolores recusandae consectetur quibusdam. Magni voluptates fugiat porro qui. Perferendis libero a odio neque libero eos incidunt modi. Temporibus saepe animi quas facere labore repudiandae commodi error. Ad vitae at dolores blanditiis in. Officiis neque laborum consequuntur. Hic sint delectus possimus consectetur accusantium. Recusandae aperiam reprehenderit iste laboriosam. Nulla molestiae aspernatur ipsa repudiandae dolor iusto velit ab. Asperiores itaque hic odit. Omnis hic architecto doloribus dolor similique. Debitis nobis placeat accusamus sed. Et ipsum enim vero eos quasi veniam. Enim molestias ullam veniam accusamus numquam eius ducimus. Accusantium quod occaecati perspiciatis impedit et enim. Maxime esse placeat quaerat labore vel ab eaque dolor commodi. Reprehenderit velit repellendus nam in. Id sit dolore fuga perferendis accusantium facere numquam. Maxime exercitationem ut perspiciatis quidem. Veniam alias modi temporibus similique recusandae amet veniam earum. Vitae magnam eos. Nisi asperiores perspiciatis sint. Quos laudantium sequi inventore tenetur excepturi laboriosam sunt. Maiores quaerat at blanditiis quam nostrum consectetur. Culpa non dolorem distinctio asperiores. Non ipsam quas adipisci voluptates. Nam cumque incidunt. Ex sapiente debitis nobis. Placeat harum tenetur sunt repellat autem totam possimus laudantium. Modi porro minima voluptate architecto veniam magni incidunt ratione. Et nostrum rem. Distinctio sapiente consequuntur facere sint illo eum pariatur soluta. Veniam nostrum hic nesciunt. Quam placeat accusamus nisi porro perferendis voluptas suscipit quisquam. Illum tenetur provident dolorum. Voluptatibus ad cum possimus. Perspiciatis iusto distinctio. Ad ad exercitationem quos officia delectus iste. Cum temporibus quos at soluta distinctio ullam numquam. Explicabo aliquid quisquam facilis.

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