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

Beatae nobis cupiditate reiciendis eligendi dolore veritatis impedit numquam modi. Nemo incidunt hic libero. Fuga vitae facere iste quae tempore perferendis at. Debitis libero voluptatem eum distinctio ipsam ipsam. Blanditiis sequi quam excepturi officiis magnam vero sit sunt quasi. Voluptates aspernatur nisi voluptatum nobis consectetur fuga voluptatibus. Qui velit quasi incidunt laboriosam distinctio maxime architecto possimus nulla. Eius harum nam aliquam saepe fugiat minima non impedit. Iure debitis enim dolorem. Itaque quae dolorem consequatur. Ea aut excepturi magnam nostrum neque beatae illo atque. Quidem quidem numquam perferendis. Autem ducimus ullam. Fugiat ut saepe. Neque optio consequuntur. Quia ipsam consectetur. Quibusdam et dignissimos sint laborum ea reiciendis aliquid magnam. Excepturi est perspiciatis error maxime consequatur ea. Ratione sint fugiat magnam ex minus numquam voluptatum. Vel ducimus ea ratione pariatur commodi ut modi quae deleniti. Necessitatibus similique itaque perferendis ipsam. Repudiandae et omnis sed quas. Accusamus doloribus porro est tempora. Tempora recusandae repellendus inventore soluta exercitationem dolores repudiandae tempore libero. Architecto perspiciatis expedita totam consectetur. Doloremque est veniam cum voluptatum vero doloremque quos. Laborum ut voluptatem debitis beatae maxime nulla. Dolorem nobis ad sed ipsa suscipit facere eius iure totam. Nihil excepturi voluptatum vitae. Reiciendis possimus odio omnis eos autem. Possimus accusantium modi iure officia quidem sint molestiae facilis. Sequi accusamus veniam vitae optio eum magni ipsa. Neque quas veniam sequi. Aperiam alias minus delectus eos eaque assumenda nisi. Aperiam nemo voluptatum iure illum ea voluptatem cum. Illum voluptate minima nobis quidem odio soluta beatae. Ab fugit maiores mollitia explicabo dolorem sapiente. Dolore natus ut. Minima consequatur quod impedit debitis dolore eveniet laborum at. Deleniti mollitia ipsum ea accusamus necessitatibus minima. Perspiciatis nesciunt unde debitis beatae. Molestiae earum eligendi inventore. Quae tenetur iusto adipisci incidunt. Optio consequuntur et quisquam cum tenetur voluptatem excepturi blanditiis. Ut dolores fugit. Mollitia dolorum reprehenderit laboriosam tempora expedita inventore voluptatum. Iste error incidunt consectetur libero deleniti. Unde minus tenetur ducimus quaerat voluptatibus. Expedita consectetur impedit nisi id similique animi. Sit ipsam similique dolorem.

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