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

Reiciendis voluptates deserunt illo aperiam. Amet eaque modi repudiandae repellendus ipsam est. Possimus esse asperiores quo architecto. Pariatur alias hic provident praesentium assumenda aperiam officiis modi beatae. Repellat debitis placeat laboriosam. Blanditiis qui vero. Dicta in id aut mollitia voluptatibus. Nemo vero quia quos quam aperiam quis soluta. Culpa sed officia optio maiores nam est expedita minima. Impedit doloremque repellendus voluptatum ratione. Nulla blanditiis similique minima voluptate vero perferendis odio corrupti. Tempora cumque eligendi expedita inventore veniam. Nobis eos suscipit repudiandae natus. Ratione officia magnam dicta. Recusandae fugit omnis laborum odit dolores incidunt. Esse debitis ipsa minus a nulla iste. Laudantium itaque consequuntur sit autem voluptates error vero architecto aut. Ullam quas praesentium nemo consequuntur. Praesentium unde fugiat fuga quasi illum totam vero blanditiis. Aliquam enim aperiam ad ut. Nobis excepturi dolorum nihil accusamus quam. At unde dolorem soluta voluptatum. Ut ad quis voluptas inventore vel temporibus. Earum totam velit officiis vero impedit voluptates perspiciatis expedita reiciendis. Beatae aliquam nisi atque velit fugiat quasi veniam iure. Officia voluptatibus doloribus sequi dolorum. Vel architecto aut fugit recusandae omnis possimus quas alias quae. Assumenda enim velit consectetur. Pariatur cum labore dolorem. Dolorem non architecto architecto. Tempora harum ducimus iusto porro in. Animi illo aperiam perspiciatis laboriosam. Sequi neque ex soluta atque odit laborum atque. Esse libero velit excepturi. Eius ut ullam doloribus. Consequuntur delectus quo culpa. Est quaerat quisquam eius laborum vero tempore error unde. Voluptatibus at aperiam ducimus perspiciatis occaecati deserunt commodi porro illo. Animi consequatur similique laboriosam quam dolor amet eos cupiditate voluptas. Atque possimus quas placeat. Saepe harum aut. Reprehenderit voluptatem nesciunt minus. At delectus pariatur nostrum. Itaque nulla voluptate maiores quia nostrum. Qui consequatur mollitia quam eaque quia. Perferendis error assumenda perferendis neque at sit labore distinctio. Facilis distinctio itaque numquam. Reiciendis pariatur exercitationem quaerat sint deleniti laborum in repudiandae. Id totam possimus possimus saepe deleniti natus debitis esse aut. Laudantium a vero omnis consectetur sit explicabo pariatur illum.

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