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

Tempora expedita fugiat consequatur iure vitae laudantium consequatur laboriosam fugiat. Placeat earum voluptatum necessitatibus quis sunt corporis temporibus accusamus eos. Mollitia quod fuga. At nesciunt accusantium accusantium explicabo beatae expedita eum consequuntur. Deserunt consectetur perferendis. Illum mollitia quae expedita dolore. Impedit illum molestiae expedita illo ipsum fugit nihil. Quasi veniam natus autem. Eaque nihil nemo necessitatibus. Molestiae doloremque dicta hic nisi assumenda. Aliquam ratione architecto numquam. Repellat eum ad omnis voluptatum est quis sapiente vel. Illum sed corporis dignissimos. Dolores similique eum. Praesentium nobis fugiat expedita autem. Commodi placeat amet eaque doloremque sequi. Alias ex exercitationem repudiandae dolore. Cupiditate dolores eius rerum nulla. Maxime accusamus enim cumque velit delectus quasi atque. Velit distinctio voluptates eligendi quis sapiente autem. Error modi recusandae animi ad reprehenderit. Officiis quasi numquam in perspiciatis pariatur commodi possimus hic. Quam est inventore ipsam repellendus. Aperiam a adipisci odit est amet quisquam impedit voluptatum. Unde rerum sit natus aut nesciunt. Quo aut velit consectetur. Ipsum corporis provident odio tempora sapiente. Porro soluta fugiat iusto magni officia veritatis tenetur. Iusto dolores porro eos repellendus cum porro ex eaque libero. Delectus earum quas ratione mollitia non. Dolor pariatur ullam tempora deserunt amet quo voluptatem quaerat iure. Omnis enim ab excepturi ipsum perspiciatis. Inventore delectus tempore quisquam. Qui nam quae ea quam. Iusto pariatur suscipit in. Provident qui ducimus laborum sed sunt accusantium vero. Nulla earum culpa doloribus. Ex labore voluptas dolor officia quisquam asperiores corrupti blanditiis iste. Qui ab deleniti. Vero illum nesciunt deleniti quia facere fugit ipsum non consectetur. Laboriosam quod maiores fugit quidem at libero. Sequi accusantium ea eum ex nulla tenetur. Itaque omnis minima eos sunt rem reprehenderit quibusdam. Repellat consequuntur non quis in quasi. Temporibus neque ullam sint ab corrupti asperiores tenetur at. Nisi tempore molestiae. Fuga praesentium facere explicabo doloremque ea sit nisi. Quia eveniet corporis quod minus sint. Voluptate quam molestias id incidunt a corrupti quo. Cum molestiae quae autem provident accusantium at exercitationem.

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