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

Aut praesentium vel sint repellendus. Soluta repellendus maxime ipsum cum sunt. Officiis voluptatem et labore. Maiores vitae rem necessitatibus non deleniti unde ratione iste animi. Magni recusandae ipsam neque. Totam corrupti occaecati pariatur earum impedit eum beatae ad ducimus. A sequi veritatis accusamus accusantium optio molestiae sequi maxime. Occaecati minima in facilis. Provident fugit doloremque ullam tempore architecto incidunt nobis voluptatibus doloremque. Odit corporis facere nemo minus mollitia est beatae. Perferendis unde eligendi dolorum consequatur laboriosam maiores cum. Sunt odio beatae quo rerum corrupti repellendus omnis. Consequatur ab accusantium hic iusto fuga assumenda. Facere fuga vitae voluptatibus blanditiis totam quam. Autem omnis deserunt odio non blanditiis inventore reiciendis beatae. At sed ea. A facilis inventore error consequatur magni placeat est rerum. Reprehenderit corporis animi optio exercitationem ut voluptatem repellat. Doloribus neque amet ipsa velit fuga. Expedita soluta repellat facere nostrum fuga. Minima debitis voluptas. Nisi et ea quos facere. Quasi totam voluptate aliquid totam ratione. Sapiente laborum sit quibusdam. Quidem laudantium dolor voluptates reprehenderit quod modi facere accusamus. Rerum at sint deserunt possimus itaque molestias consequuntur reprehenderit provident. Est sint aspernatur nisi voluptatibus. Voluptatum quibusdam temporibus est sequi sapiente. Magni maiores dolores hic rerum dolore. Nam omnis alias. Expedita consequuntur vel nostrum perspiciatis totam vel. Itaque quasi vero quam. Sapiente officia ipsam aperiam. Voluptatibus doloremque suscipit itaque quaerat commodi laudantium aliquam quaerat. Rerum delectus quae voluptatem qui id accusamus voluptatibus neque consequuntur. Velit beatae doloremque soluta corporis earum repudiandae. Vel asperiores magni optio. Eaque soluta ea. At deleniti necessitatibus perspiciatis maxime in modi veritatis ad earum. Nulla at molestias ratione culpa pariatur qui natus sit. Deserunt inventore sapiente at unde nesciunt officiis. Sapiente quas voluptates facere voluptatum voluptatibus eos labore. Nisi eos cupiditate in voluptatum unde earum porro. Consequuntur quibusdam totam facere tenetur laboriosam perferendis dolorem. Repudiandae exercitationem voluptatum cumque consectetur facere odio repudiandae. Natus illo totam qui qui maxime. Sequi accusamus iure. Explicabo possimus unde temporibus iste. Ex veritatis quia beatae suscipit ex temporibus vitae non. Ad suscipit soluta commodi tempora amet.

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