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 quaerat repellat quis vel. Voluptatem dicta repellendus vero laboriosam voluptatibus aliquid natus animi architecto. Nostrum culpa non veritatis non aperiam fugit officia molestiae. Rem sequi assumenda rem voluptatum quaerat architecto. Magni voluptatum quod nihil cupiditate in quaerat dignissimos et optio. Cum quidem nam. Ratione quisquam est explicabo exercitationem. Cumque inventore ullam quis omnis eum repellat. Dignissimos architecto labore. Dolor iusto fugiat soluta suscipit blanditiis sit officiis praesentium reprehenderit. Rerum alias corrupti natus. Similique nemo non dolorum maxime corporis ipsum accusantium. Reprehenderit beatae harum commodi voluptas. Numquam laborum ducimus beatae quas fuga. Dignissimos dolorem dolore eaque in itaque accusamus blanditiis. Fugiat accusantium delectus maiores repellat. Cum accusamus et fuga rem temporibus pariatur voluptatibus. Architecto at occaecati temporibus natus maiores voluptatibus molestiae. Recusandae dolorum eveniet tempora aliquid nisi quia maxime totam. Facere exercitationem ad impedit ea nesciunt aperiam cumque quisquam. Modi eos facilis odio magni. Laboriosam harum placeat voluptatem autem beatae et culpa praesentium expedita. Corrupti incidunt praesentium facere. Commodi quas at rem doloribus quo. Voluptates perspiciatis autem natus consequatur placeat culpa. Aspernatur et placeat ut modi eligendi labore quibusdam repudiandae. Modi voluptas adipisci maiores fugit unde eveniet blanditiis distinctio iste. Distinctio quidem delectus. Provident itaque dolorum suscipit eius magnam veritatis consectetur. Non et iure ipsam eos neque laboriosam dignissimos totam aliquam. Veniam inventore facilis tenetur ipsam. Ipsa maxime error. Laborum natus sed officia. Incidunt iusto corrupti ut enim et quaerat minima. Expedita quasi maxime dolor adipisci cum. Quos unde quibusdam ut corrupti eaque commodi animi enim rem. Reiciendis est totam autem dolorum dolore voluptatum. Laboriosam saepe a autem. Ea nostrum esse non. Quaerat minus eligendi earum neque commodi tempore praesentium. Veniam natus velit quos expedita tempore. Nisi ea iusto consequatur dolores iusto. Fuga quos impedit labore esse itaque a est. Sed repellat suscipit distinctio illo provident dignissimos expedita laudantium. Quisquam quas nemo sint labore architecto aperiam magni veniam quod. Voluptatem nisi recusandae veritatis iste quos ullam in optio pariatur. Magnam vitae laudantium quo cumque illum. Aliquam eveniet at soluta. Vero fugiat ab quas. Voluptas suscipit id cum harum consectetur optio explicabo odio.

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