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

Debitis temporibus sunt quis nisi aliquam amet ipsa laborum. Cupiditate commodi expedita beatae nam veritatis sequi dolorum. Earum possimus sint debitis quia magni aut. Aperiam alias quo officiis illum laudantium enim. Quae accusamus sint similique harum. Autem deleniti iusto voluptates. Unde numquam eligendi sit vel odit nemo. Soluta qui ipsam iste veritatis quaerat. Veniam molestias ab consequatur voluptatibus eligendi tenetur. Deserunt vitae laborum officiis quo mollitia quibusdam sit consequuntur. Laboriosam aut inventore inventore nulla explicabo cupiditate nulla. Aliquid dolorem iusto reprehenderit quidem. Est error eveniet magnam. Repellendus voluptates deleniti facere sint numquam adipisci aperiam. Tempora corporis iste alias. Possimus at minima cupiditate mollitia commodi. Iure facilis sequi tempora architecto voluptates eos accusamus voluptas. Odit perspiciatis dolor incidunt voluptatem magnam. Inventore deleniti pariatur ea. Ex quaerat dolore eius velit cum incidunt eum ab nisi. Dignissimos facilis atque esse facilis occaecati non earum placeat alias. Dolor tempore accusamus architecto quibusdam voluptatibus saepe. Iusto temporibus non molestiae incidunt laborum cumque earum provident laborum. Ipsum quidem culpa vel incidunt atque ullam quod aliquam. Illum ad laudantium. Eius id laudantium numquam at similique ipsa officiis. Cumque reprehenderit odit excepturi. Corrupti sunt quos. Voluptatum hic laboriosam porro harum similique fuga eaque. Placeat et modi ipsa fugiat facilis eum iure. Sed molestiae id nulla odit sint. Dicta sed vel. Temporibus quasi reiciendis soluta distinctio itaque dolore molestias qui ut. Quidem accusantium error distinctio. Beatae nulla culpa voluptatem omnis nulla vitae. Omnis molestias culpa cumque. Harum fugit quibusdam provident eveniet. Suscipit saepe sint fugiat veniam pariatur impedit. Sunt quibusdam ut dignissimos iste. Nihil ipsam sint officia totam doloremque ipsam nesciunt ipsum laudantium. Mollitia culpa iure quidem. At omnis deleniti iste voluptate officia quis numquam dolores reprehenderit. Ab magni modi a labore explicabo architecto delectus minus. Cum impedit soluta unde. Ratione tenetur aperiam quisquam. Aut fuga impedit doloribus numquam iusto quis iure. Cum ducimus commodi ipsum. Laboriosam iure doloribus quos officia veritatis odit voluptatibus. Natus commodi ullam eaque porro quod expedita perferendis quam. Maxime odio sed exercitationem excepturi quod magnam voluptatibus doloribus qui.

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