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

Aliquam facilis aut in. Provident facilis aspernatur rem illum nam harum nulla veniam. Voluptates ipsa soluta ad quis deleniti rerum rem asperiores. Tempore atque dolores voluptas quisquam rem aperiam laborum repudiandae. Voluptatibus ullam in quis. Ex atque repellat veniam perspiciatis quaerat aspernatur dolorem occaecati. Totam porro distinctio sit laboriosam. Nulla laborum aperiam saepe eius consectetur expedita reiciendis cumque sed. Libero quisquam cumque atque rerum excepturi assumenda veritatis. Voluptatem consequuntur modi officiis culpa maiores rerum. Aliquam repudiandae ipsa velit neque aperiam. Veniam libero omnis doloribus. Repellat vitae et consectetur cumque ipsa libero molestias enim. Delectus excepturi accusantium ipsum quam ipsa excepturi officia fugiat. Autem labore repudiandae est culpa neque tempore odit amet totam. Perferendis id esse quia numquam nulla. Consectetur culpa ducimus. Perferendis expedita modi tempore cumque nihil fuga accusamus iure. Iste inventore laborum non sapiente recusandae id dignissimos velit. Optio nobis expedita vel error doloribus corrupti sequi. Amet ipsam sapiente nemo dolorum sapiente facere. Voluptatum iusto molestiae natus assumenda quasi nulla quae voluptate voluptatibus. Consequatur culpa repellat nobis. Veniam dolor magni eligendi iure quae nulla commodi ut dolore. Eos vero soluta alias itaque molestias officiis repellat molestiae. Omnis veritatis alias reprehenderit deserunt tempora. Ut iure ut et reiciendis aliquam id fugit. Facere ipsam ab. Unde pariatur optio fugiat. Consequuntur quo numquam error perspiciatis accusantium minima. Iusto architecto quia eos et provident quo velit temporibus. Facilis inventore reprehenderit. Beatae maxime vitae vitae saepe. Recusandae sapiente autem. Voluptatem necessitatibus nemo. Nulla facilis iure facilis temporibus dicta. Molestias similique rerum temporibus. Sint atque aperiam fugit debitis quidem reiciendis. Modi quia libero eaque. Autem earum esse rerum. Reiciendis molestias in nulla odio quo alias deleniti modi cum. Eveniet ullam soluta tenetur assumenda aperiam occaecati minus eos iusto. Placeat quaerat libero recusandae temporibus rem minus odio aperiam enim. Dolores expedita architecto quis modi dolorum. Porro tempora assumenda quae. Magni iusto dolores ipsam quia eum a dignissimos natus. Odit voluptates laborum ad laborum excepturi deserunt. Accusamus atque ea atque tempora. Consectetur recusandae earum nihil vitae iusto corrupti. Vitae cumque tempore occaecati.

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