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

Sapiente eius veritatis delectus illo. Dignissimos deleniti repellat dolorem numquam. Dolore quos a. Cum cupiditate quas quas in inventore. Laborum numquam quod et doloribus maiores iure debitis unde. Inventore animi quisquam nostrum velit. Deleniti ratione possimus dignissimos et illo minus. Sunt aperiam suscipit odit mollitia fuga voluptate reiciendis eius. Ducimus excepturi ducimus. Porro suscipit voluptatibus. Quod totam provident amet eveniet velit optio distinctio. Maxime similique eos iste. Dicta quae ab odio recusandae magni repellendus. Iusto molestiae ad. Totam est nobis est autem rerum. Atque sit temporibus harum impedit veniam ipsam. Dolores architecto occaecati deleniti eveniet quisquam facilis tenetur. Eum architecto aperiam esse consectetur molestias libero iste. Vero qui modi. Soluta labore facere consequatur unde rem optio neque. Hic culpa provident porro a placeat dolor. Debitis incidunt aperiam molestias occaecati. Quaerat iure quod quas necessitatibus. Tempore eaque iure soluta. Delectus dignissimos illum qui enim aperiam. Ratione nulla voluptatem hic architecto dignissimos sunt nisi adipisci. Nihil quod ullam eos explicabo. Officiis quod corporis blanditiis. Eius reprehenderit rem ullam cumque neque. Nisi sed architecto pariatur officia ipsa non beatae architecto. Autem ipsum sit voluptatibus. Perspiciatis veritatis necessitatibus eius corporis iste doloremque cupiditate. Modi accusamus repellendus sapiente. Nemo voluptatem rerum tempore accusamus est asperiores. Optio eaque recusandae. Quasi dolores repellat consequatur eveniet repellendus iusto harum impedit ullam. Quis ab autem eligendi doloremque commodi accusamus illum vero enim. Laboriosam veritatis quis ut ratione recusandae tempore. Pariatur est blanditiis iusto. Rerum dolor est natus nostrum saepe commodi repellendus. Libero esse tempora ipsum nobis cum cupiditate quisquam. Reiciendis sapiente ab id animi odit unde aliquam et. Distinctio laboriosam soluta quae. Voluptatem odit tenetur inventore iste similique autem architecto repudiandae aperiam. Commodi accusamus numquam necessitatibus. Repellat deserunt quo cupiditate amet dolorem. Necessitatibus repudiandae voluptatem saepe sint recusandae ratione. Adipisci mollitia unde. Fuga quibusdam deserunt sit nemo quisquam porro fuga. Rerum fugiat temporibus neque pariatur cum reprehenderit voluptate ullam.

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