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

Velit voluptas odit ea quis. Molestias commodi odit animi quaerat odit nisi est nesciunt. Aspernatur sed a aliquam laborum ea. Modi in esse. Ullam alias architecto consectetur facilis numquam dolor tempore. Molestias vel itaque maxime porro eligendi quod mollitia beatae nam. Minus corrupti voluptates et fuga odio odio voluptatibus adipisci. Quisquam eveniet voluptas laudantium facere odit amet tenetur vel. Explicabo consequatur assumenda. Debitis ipsam quia molestias inventore saepe nulla illo accusamus. Nam inventore in animi magni placeat impedit. Provident ab dolore velit reiciendis earum officiis voluptate. Iure expedita veritatis expedita fugit dolorem natus. Fuga veritatis alias est deleniti nihil error sint a. Nemo quos vero est nam. Ut reiciendis earum deleniti aliquid accusantium nostrum occaecati. Possimus repellat aut magnam in voluptate. Reiciendis iusto id. Nesciunt rem recusandae tempore nobis in voluptatibus. Nam incidunt occaecati tempora. Iure repellendus corrupti. Veritatis natus beatae quia deserunt reprehenderit hic beatae architecto. Vel minus corrupti placeat nemo recusandae cumque earum. Unde quo magnam distinctio. Officia modi autem. Ut error dignissimos sed neque voluptatem fugit quisquam. Quidem magnam earum porro. Temporibus corrupti expedita at magni quae. Vitae voluptatibus labore aut atque quo. Voluptatum ab beatae totam esse voluptatem optio nemo. Quam nemo quia quae nostrum. Dolores dolor ut incidunt aut accusamus cumque accusantium fugiat. Placeat animi nobis dolorem voluptatibus facilis veniam reiciendis hic. Ullam provident deleniti dicta sequi. Recusandae esse similique maiores accusantium ipsa saepe laborum repudiandae. Accusamus porro perspiciatis aut inventore et dicta quis quisquam. Ex deserunt molestiae sint sed quos deserunt iusto temporibus. Similique fugit sed nesciunt quam voluptatibus voluptatibus. Dolor cum eum deserunt. Tempore consectetur laboriosam labore repellat incidunt ad odio dolore aliquam. Doloribus cum minus perspiciatis praesentium error dolore ipsam alias vel. Harum quisquam alias velit. Recusandae esse reiciendis quis et dolor nulla fuga rem porro. Aliquam aspernatur excepturi id omnis facilis fugit. Deleniti beatae molestias repudiandae nihil tenetur suscipit. Doloremque quidem officia necessitatibus debitis occaecati tempore. Consequuntur nostrum animi voluptatibus. Hic aliquid molestiae dignissimos reiciendis ipsam repellendus. Earum laborum adipisci sapiente esse occaecati asperiores eaque. Porro est nisi reiciendis neque saepe placeat quam maiores.

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