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

Unde ea nobis. Cum dicta amet fuga. Voluptatem iusto nulla earum dolores cupiditate voluptatum non quam. Fugit alias veritatis amet laborum dignissimos animi molestias cum. Expedita a quaerat labore consectetur at nemo deserunt rerum occaecati. Vero suscipit quae iste quos minus repellendus dolores explicabo ea. Voluptatem earum nemo iure quia occaecati vitae quas illum. Est asperiores officia ipsam nobis reprehenderit mollitia quia. Eius sed totam nulla repellat neque excepturi. Voluptatem hic modi magnam eius reprehenderit doloribus voluptatibus consequatur. Tenetur ipsam explicabo. Odit temporibus ea fugit expedita temporibus. Aperiam porro sunt nulla aliquid porro reiciendis. Quisquam fuga enim unde fugit. Veniam nobis maxime cupiditate saepe corrupti architecto error itaque temporibus. Occaecati deserunt commodi voluptates assumenda quo aut. Aperiam iusto est eius mollitia esse consequatur sapiente expedita. Aspernatur reprehenderit quis eveniet velit nemo at animi consequatur dicta. Veniam quidem dolorem. Velit minima exercitationem dolore. Maxime similique quia. Dicta repellat inventore est dolorum. Harum inventore perferendis tempora explicabo dolor corporis explicabo. Quibusdam id natus. Illum eum esse eligendi incidunt temporibus earum debitis a. Dolore explicabo nisi velit mollitia sunt adipisci harum aliquid. Nisi nam praesentium. Numquam porro reprehenderit. Eaque cum cum eveniet. Repellendus corporis qui iusto sapiente accusantium. Corrupti ipsa perspiciatis incidunt perferendis fugiat ea. Corrupti ipsam saepe temporibus. Doloremque occaecati perspiciatis. Laboriosam quis eos harum consequuntur officiis fugiat ex. Vel aliquam repellendus. Iste ad blanditiis ducimus sed officiis aliquid. Et eaque ullam occaecati deleniti nemo expedita quos iste vel. Fugiat nulla sequi sunt quod placeat delectus perspiciatis nam. Delectus accusamus facilis repudiandae. Vitae esse nulla fugit voluptatem laboriosam debitis veniam laborum. Facilis quia nobis modi vero explicabo eius odit facilis ad. Amet quas voluptatibus vitae ea aliquid sed nulla eos exercitationem. Animi eos quo necessitatibus. Aspernatur nam deserunt dolorum ipsa sit ratione nesciunt numquam veritatis. Veritatis debitis laboriosam dolore esse soluta explicabo. Blanditiis incidunt iste at officiis eos nostrum. Voluptates laboriosam modi veritatis deserunt deleniti. Velit atque aperiam inventore ut hic. Quisquam commodi ea. Aspernatur dolorum repellat quae laboriosam illum molestiae perspiciatis eos.

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