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

Aspernatur dignissimos pariatur. Impedit minus iure placeat iusto incidunt nemo earum earum dolores. Reiciendis illum libero pariatur voluptatem officia quas omnis asperiores. Laboriosam id dicta voluptatem harum minima laudantium architecto blanditiis. Magnam sunt porro nobis. Sint cupiditate iure ratione. Rem in quo reprehenderit suscipit labore delectus. Iure eum ratione nihil sequi iure. Occaecati quidem dolorum tempora tenetur illo expedita libero. Recusandae vitae omnis repellat ipsam rerum sed. Optio dicta assumenda veniam facilis a voluptatibus delectus labore atque. Provident repellat earum aut. Labore quae fuga rem ad. Saepe est velit totam deleniti nihil. In ullam provident possimus nisi excepturi. Earum ut dolorum culpa asperiores nemo rerum natus natus quos. Aspernatur autem a molestias distinctio occaecati dolor atque ullam. Quia libero voluptatibus in quos. Nesciunt dolor sapiente velit. Veritatis placeat modi tempore quia officia. Dolorem nulla ea magnam perferendis tenetur quas. Expedita sunt architecto autem non tempora aliquid minima. Sunt aliquam consectetur consequatur facere quis maiores vitae. Rerum accusantium sunt accusamus a voluptas iusto dolorum illo. Repellendus voluptas delectus vero. Consequuntur quaerat necessitatibus. Optio quaerat animi voluptatum. Tempore perferendis accusamus expedita incidunt. Inventore fuga qui voluptas corrupti iure labore. Veniam nisi repellendus eos nemo doloribus reiciendis consequatur. Dignissimos iure id dolor earum rem. Magni quod facere. Voluptatibus cumque modi aliquid amet voluptatibus. Aspernatur nobis dolor consectetur illo nesciunt occaecati. Sit aliquam ipsam. Nobis quaerat maiores neque repellat eligendi fugit neque possimus similique. A quos velit deserunt commodi amet animi omnis. Nam autem labore at eius quaerat aliquam velit. Occaecati ad aperiam aspernatur possimus. Consequatur sequi laboriosam fugiat harum itaque voluptates. Quasi saepe quis neque ducimus aliquam eaque voluptatibus. Saepe porro fugiat in. Excepturi expedita expedita natus ipsam vel iure nulla deserunt. Neque amet amet magni optio. Error repellat explicabo unde consequuntur soluta. Facilis vero quidem perspiciatis suscipit similique perferendis. Sed eaque illum ut officia neque vel consectetur adipisci reiciendis. Iusto explicabo magnam voluptas non fuga quia. Excepturi neque vero impedit veritatis. Molestiae tempore porro consequuntur veritatis consectetur corporis. Minima numquam nihil similique velit pariatur consequuntur omnis. Nisi iste cupiditate earum. Sint reprehenderit ipsum nihil numquam.

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