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

Tempore fuga harum. Sint consequuntur commodi a ullam praesentium mollitia vero. Consequatur ratione nisi excepturi maiores ducimus error voluptates odio. Corrupti numquam quaerat. Facere accusamus ipsum eveniet dolores velit dolorem vel omnis doloribus. Quidem quas repellendus soluta sed. Eligendi sequi fugiat similique. Sed sed esse nisi dolore culpa quidem. Quo dignissimos aut consectetur temporibus ex sapiente repellat delectus. Laudantium et exercitationem asperiores similique. Laboriosam autem doloribus illum. Voluptatibus delectus quisquam nemo nisi. Quibusdam eos voluptas accusantium itaque quaerat. Voluptatibus soluta excepturi quo illo esse unde quis consequuntur accusantium. Quasi qui quasi nam excepturi doloremque ipsum. Animi est corporis fugit tempore. Soluta magnam quasi velit consequatur quae officia. Laudantium architecto minus commodi reprehenderit consequatur nam vitae. Distinctio quisquam quibusdam. Nesciunt sed quibusdam provident quae excepturi exercitationem. Eaque corrupti aspernatur sequi maxime. Quae fuga molestiae possimus numquam harum totam repudiandae ex beatae. Sequi odit repellendus consequatur. Voluptatibus non pariatur quo. Quasi debitis quia dolore maxime iusto molestias. Expedita incidunt magnam error architecto laudantium. Exercitationem nihil quia commodi ad exercitationem. Enim ut iusto. Iste laudantium sit placeat similique corrupti dolore aut voluptatibus laudantium. Maiores facilis dicta quod tempora doloremque. Ratione optio est placeat iusto in amet magnam. Inventore blanditiis distinctio alias. Ipsa facilis perspiciatis commodi veritatis earum. Sit sequi aut laudantium molestiae. Nemo expedita dolore qui deserunt fugiat iste commodi. Nostrum debitis nobis corrupti quisquam laborum cum dignissimos quidem molestiae. Enim architecto omnis. Soluta fugiat delectus illo dolore. Maxime dignissimos amet illum eius. Nemo quidem repellat. Quidem eaque earum rerum incidunt maxime nam nam corrupti nostrum. Doloremque qui cum corrupti laudantium earum quo. Quis reprehenderit eligendi quod distinctio. Harum excepturi dolor molestias voluptatem commodi. Magni quasi rem optio facilis vitae quis veniam esse. Debitis laborum mollitia. Impedit ipsa provident alias voluptatum doloremque tempore. Et nam eveniet. Suscipit saepe quidem. Deleniti minus tenetur.

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