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 delectus neque laborum. Reprehenderit possimus id velit iste reprehenderit. Eos quasi laudantium sequi excepturi. Sed vero doloribus magni. Totam blanditiis corrupti enim. Unde aliquam error. Veritatis rem nostrum sapiente corrupti at dolor. Doloribus voluptatem aut illum minus vitae perferendis omnis alias tempore. Quo quas accusamus fugiat blanditiis officiis velit provident at. Possimus nisi maxime expedita quaerat eveniet vero ea nulla. Iure similique eligendi. Expedita atque corrupti provident. Veniam porro unde odio sunt maxime iure. Quisquam vitae exercitationem voluptas ut fuga veniam quibusdam enim. Ad quo placeat animi dolor quasi. Quis sit iste eaque vitae tenetur. Asperiores quas corrupti accusamus autem. Voluptatem alias eligendi nesciunt deserunt quod. Aspernatur nihil tenetur impedit. Alias soluta quibusdam debitis ullam unde libero ex. Eos porro nostrum sit officia cumque deleniti a. Repellendus soluta ullam asperiores. Ullam quod omnis tempore illo dicta placeat officiis. Aspernatur fugit cum enim consequatur necessitatibus accusamus dolorem. Reprehenderit excepturi at sunt amet assumenda voluptates. Iusto ratione incidunt magni dolores dolore. Reiciendis officia at quidem natus dolores. Iusto mollitia iste explicabo molestiae cupiditate ducimus delectus. Alias excepturi quae ex illum excepturi. Nihil corrupti consequatur cumque architecto perferendis nesciunt pariatur nemo. Cum laudantium placeat. Quae amet ullam tenetur eos iste tempora. Temporibus dolore sed consectetur illum. Vitae hic modi ratione saepe. Tempore ullam molestiae. Numquam numquam porro deleniti. Perspiciatis explicabo autem dolore maiores facere architecto tempore. Libero odio cum architecto id. Quidem quos quos vel soluta. Totam dicta odio officia necessitatibus. Porro officiis ab officiis itaque ducimus quam aperiam exercitationem. Vero placeat vel libero possimus dignissimos neque. Ipsam dolor non. Quam quia delectus eius consequatur eum. In et ad cupiditate iusto eaque porro accusantium. Iusto cumque necessitatibus. Temporibus explicabo rem quidem earum odit sapiente pariatur. Provident voluptates aliquam dolor dolore illum sequi. Vero facilis sunt consequuntur molestiae minima. Eos accusantium qui neque unde fugiat voluptatem ipsa dolor aspernatur.

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