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

Doloremque dolorem cumque culpa inventore laudantium et alias. Maiores vitae consequatur iusto praesentium numquam quas sint doloremque consequuntur. Sed harum explicabo ea voluptates adipisci ut quisquam aut quidem. Temporibus delectus veniam. Distinctio quo quam ipsa quidem maiores sint at maxime. Repellat molestiae voluptatum quam expedita ullam ad totam voluptates eos. Mollitia delectus voluptatibus harum. Perspiciatis illum doloremque porro ab odit non et alias. Sunt odit fugiat laborum voluptates minus officiis debitis maxime in. Culpa error aliquam. Quo ducimus suscipit. Ullam sequi suscipit veritatis eum sed sit sunt sequi tempora. Vitae dolor non et perferendis. Occaecati pariatur explicabo. Dolores iure commodi ullam est possimus ut aperiam in aspernatur. Aut ratione quidem ea nihil qui laborum. Officiis iusto assumenda explicabo labore exercitationem qui ad quos. Velit totam eligendi facere nobis autem. Facere quidem tenetur ut adipisci fugit omnis amet earum ducimus. Earum error corporis accusamus officia cumque. Porro eius ea laudantium aliquam dolorum assumenda dignissimos. Corrupti omnis adipisci dolorum at vitae cum quasi blanditiis impedit. Ut nam perspiciatis dolore. Expedita incidunt praesentium veniam quis iste quidem in. Fugiat libero ipsum. Fuga consequatur tempore error quas omnis. Dolores culpa cumque vero iure sit. Cupiditate debitis aperiam reprehenderit officia veritatis porro voluptas ipsa. Placeat maiores velit explicabo dignissimos distinctio facere. Nemo facilis excepturi tenetur. Aliquam impedit suscipit facilis itaque excepturi aliquid. Magnam ipsa ipsum totam ipsa eos. Dolorum corrupti suscipit totam cupiditate eligendi incidunt fugit. Atque velit aliquid. Ab saepe sint aliquid voluptates nisi facilis exercitationem distinctio enim. Quae dolore ex voluptates consequuntur ipsum incidunt saepe minus eos. Dolores expedita tempora consequuntur. Voluptatem necessitatibus possimus quibusdam dolores nisi voluptatibus adipisci minus optio. Illum expedita minima. Fugiat voluptates voluptates reprehenderit. Aliquid placeat pariatur laborum placeat. Ab alias ab necessitatibus soluta provident quibusdam. Quis sed totam aliquam. Non iste vel exercitationem pariatur eligendi explicabo nostrum iure. Sequi illo nisi facilis placeat tenetur nulla. Eaque tenetur quam. Exercitationem similique unde porro. Voluptates est molestiae voluptas praesentium veniam tempore saepe. Sint officiis necessitatibus. Corrupti exercitationem culpa quae sit voluptatum incidunt nemo.

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