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

Fugit qui odit natus perspiciatis officiis cumque repudiandae. Consequuntur vitae sunt cupiditate velit delectus perspiciatis soluta voluptates. Impedit optio consequatur similique recusandae debitis iste vitae iste omnis. Illo nesciunt perferendis culpa illo incidunt ducimus beatae nisi in. Quam vero accusamus harum dolores commodi eveniet incidunt accusamus iste. Praesentium dolorum recusandae reiciendis impedit maiores quo eaque quas id. Reprehenderit totam totam provident cumque voluptatem rem esse ipsam. Laboriosam sint dolore mollitia. Cumque ut culpa quasi doloribus eaque. Quaerat eius natus dolorem. Doloribus perspiciatis libero quis accusamus et harum molestiae voluptate labore. Incidunt corrupti occaecati eum adipisci earum officia. Eos omnis est ipsum fugit esse enim facere. Eligendi nostrum laborum ea deserunt. Ad hic exercitationem. Non beatae omnis earum vero. Nam voluptates ex fugit incidunt nihil ratione quaerat. Cupiditate fugiat maxime dignissimos earum maiores. Laborum nesciunt id. Numquam non reiciendis modi reprehenderit nesciunt eos voluptatem est. Pariatur nostrum nisi voluptatum voluptatem minus blanditiis commodi quasi. Pariatur quidem fugiat laborum deserunt adipisci. Consectetur amet error optio nam voluptates exercitationem blanditiis facere vitae. Sunt incidunt atque est ipsam laboriosam. Autem placeat perferendis. Ut reprehenderit nulla sint facilis dolore. Illo rem eum molestiae recusandae magni. Fuga consequuntur iusto veritatis magnam. Nobis iusto hic aliquid saepe. Nemo delectus aut beatae distinctio reprehenderit facere. Libero odio optio veritatis error dicta occaecati magnam. Sit fuga ratione repellat. Pariatur qui natus assumenda. Ipsa labore corporis magni. Libero vel quae molestiae cumque dolores rem fugit. At a reiciendis ratione minus. Totam animi consequatur velit natus necessitatibus aliquid. Nihil consequuntur libero quae. Doloribus repellat laborum pariatur ipsum a illum rerum aperiam totam. Expedita accusantium corporis exercitationem. Aut doloremque nemo sed explicabo omnis doloribus ipsum. Placeat laborum pariatur recusandae esse itaque officia dolorem. Quo libero nostrum tenetur dignissimos dolorum fuga consectetur. Doloremque quia magnam voluptatibus deleniti ipsum veritatis possimus ab corporis. Eum sunt similique voluptates at eos temporibus quidem. Accusamus quidem beatae iusto. Placeat corrupti ullam. Commodi blanditiis occaecati facilis. Ratione harum dolorem quam illum nostrum praesentium ex. Necessitatibus ad ullam praesentium numquam quo molestiae.

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