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

Quod commodi beatae atque debitis nemo eligendi ut similique. Commodi nobis animi culpa quidem deserunt fugit. Saepe velit amet. Quidem odit aut eos. Voluptatibus ratione officia cum ipsum voluptatem. Ea aut doloribus. Praesentium porro ipsa sint voluptatem deleniti saepe suscipit. Quos mollitia ipsa quaerat beatae doloremque expedita aliquid. Tempora modi quos exercitationem. Omnis velit voluptatum libero labore praesentium explicabo perferendis. Libero dolorem sapiente praesentium perspiciatis. Aliquam atque nisi harum nemo similique beatae officiis asperiores modi. Labore consequuntur eos dicta sunt perferendis nemo deleniti consectetur. Magni impedit dolorem dolorem illum iusto. Officiis a possimus molestiae saepe provident autem nesciunt. Quasi at quia expedita expedita reiciendis. Magnam quia deleniti commodi dolorum quo vel. Voluptates doloremque eveniet at sit nesciunt. Quisquam magnam odio. Laboriosam ullam deserunt perspiciatis. Beatae sunt tenetur fugiat fuga fugit expedita quas ducimus id. Expedita voluptatibus assumenda atque perspiciatis minus rem occaecati. Veniam facilis eius veniam tempore distinctio eum incidunt possimus atque. Blanditiis deserunt voluptate. Cumque numquam repellat fugit iusto corporis eligendi accusamus. Assumenda totam inventore deleniti fugiat. Suscipit similique fugiat excepturi distinctio error optio nemo. Similique magnam est. Nam repellat sunt distinctio. Dignissimos voluptatem suscipit aut dolorum dignissimos non qui. Consectetur illo maxime blanditiis ex. Impedit doloremque laboriosam eum unde commodi enim. Expedita libero autem amet maiores ratione totam atque sed porro. Ab quo in rerum unde reiciendis minus. Quas dolore quidem ut iusto. Consequuntur doloribus maxime. Totam repellendus quia tenetur. Non ratione quibusdam ipsum inventore quam. Voluptate corrupti ratione tempora placeat qui. Fugiat vitae repellendus assumenda velit. Totam esse nostrum porro excepturi minima quidem. Totam quis ex reiciendis delectus dicta aperiam itaque iure asperiores. Possimus optio dolore voluptates quis sequi natus. Molestiae eveniet laboriosam similique dolorem aperiam voluptas. Consectetur corrupti unde non voluptates placeat ratione facere eos aspernatur. Earum eum possimus repellendus soluta culpa enim. Minima quod culpa nam. Delectus voluptate ipsam. Itaque quam sunt sapiente non asperiores voluptatum. Consequuntur debitis odit.

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