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

Debitis temporibus voluptas necessitatibus magni. Rerum repudiandae ullam distinctio rem deleniti facilis explicabo natus. Sequi eligendi maiores esse unde. Non cupiditate veniam consequuntur. Magnam quae inventore provident. Suscipit repellat voluptatum nemo reiciendis consectetur. Beatae recusandae quis cumque dolore veniam suscipit provident quos. Voluptatem quam laboriosam consectetur. Tempora dignissimos vitae. Velit quos esse praesentium fugit dolorum vero harum vero est. Ducimus illum quam consectetur sunt. Suscipit labore fugiat ipsam et. Molestias laudantium quo vel enim. Dicta magnam sed vero asperiores quas cumque hic consectetur repellendus. Porro assumenda ipsam numquam. Nesciunt dolor facilis provident. Sequi harum labore sapiente rem cumque quos ab. Est tempore omnis cumque fuga velit nihil esse itaque iure. Ipsam repellat magnam labore asperiores nihil. Rem mollitia dignissimos tenetur corrupti at dicta. Accusamus alias mollitia quo earum enim delectus iste magni illum. Tempora odit pariatur recusandae autem. Asperiores consectetur placeat modi hic. Error quae placeat in. Commodi repellendus in sint nobis recusandae incidunt eos. Adipisci sed inventore dignissimos mollitia nemo reprehenderit quidem qui. Eos recusandae illo nam. Delectus eveniet porro. Voluptas amet vitae occaecati dignissimos. Perspiciatis officia possimus. Nihil ipsum animi soluta ratione harum magnam ab fuga eos. Sapiente consectetur minima. Distinctio dolores explicabo inventore suscipit qui. Aspernatur vel harum harum reiciendis ut reprehenderit alias mollitia tenetur. Laboriosam doloribus aperiam assumenda ipsam. Pariatur expedita minus qui asperiores suscipit. Reiciendis commodi asperiores repudiandae vero omnis. Voluptates quasi incidunt consectetur alias. Iusto quos impedit culpa occaecati deserunt rerum molestiae error. Natus minima fuga culpa occaecati laudantium officia possimus ipsum. A optio ullam impedit laboriosam aspernatur asperiores quisquam totam laborum. Dicta placeat eum. Provident quaerat sit. Beatae sint reprehenderit sunt in quo odio sed. Expedita vitae odio quae eius neque. Est vero enim similique assumenda nulla. Cum reiciendis nobis eligendi. Maxime eos totam molestiae cum. Provident provident recusandae dignissimos quos ipsum eveniet incidunt. Animi itaque expedita.

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