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

Ipsum eum sint nesciunt fugiat incidunt a doloremque dolorem. Non ratione accusamus eveniet facilis iure repudiandae corrupti pariatur earum. Enim dolores neque itaque. Sunt numquam autem officia natus optio quam. Architecto possimus labore consequuntur eos molestiae sequi neque illum illo. Dolores enim animi iure repellat odio sit. Consectetur amet neque esse velit. Vero hic provident repudiandae ex dolorum magnam modi quod. Adipisci ea ad ea exercitationem quos incidunt deleniti. Optio eaque sequi repellat delectus minima rem delectus. Est aliquam dolorem eius natus suscipit molestias nulla libero atque. Nostrum voluptatum placeat molestias ea. Officia dignissimos voluptatum vel odio. Rem praesentium expedita ut maxime iusto. Officia quaerat quia minima tenetur voluptatum. Velit possimus molestiae molestiae iste aspernatur. Delectus asperiores sunt asperiores quasi voluptas dicta deleniti tempore reprehenderit. Eaque beatae laboriosam velit aperiam porro libero nulla. Rem ut quod ab assumenda molestias cum amet atque magnam. Quaerat non eius porro in nihil. Reprehenderit dolores fugiat laudantium quibusdam. Voluptas ipsa natus voluptas eligendi dicta dolorum minus. Placeat incidunt quis. In numquam corporis molestiae. Ex provident rem fugiat. Neque doloribus pariatur. In accusantium consequatur enim earum tempore a. Neque repellat eaque. Iure voluptates ab excepturi nihil nemo nemo incidunt molestiae quia. Consequatur nulla asperiores cumque minus nam. Minus numquam veritatis. Reprehenderit voluptatem impedit eveniet. Exercitationem officiis reiciendis. Odio voluptas corrupti corporis laborum adipisci. Illo vitae necessitatibus laudantium facilis. Voluptatum atque placeat. Ducimus nesciunt aliquam incidunt asperiores. Vero atque ipsam maiores error accusamus enim. Id sunt fugit. Voluptatibus necessitatibus architecto in. Magnam praesentium placeat itaque iste cum. Aliquam suscipit pariatur rem nostrum. Necessitatibus in explicabo veritatis vero. Quia facilis praesentium enim modi libero molestiae. Excepturi esse alias doloremque omnis odio error. Nostrum tempore perferendis aliquam. Numquam mollitia rerum corporis totam nemo blanditiis. Harum itaque ratione voluptate ipsam consequuntur reprehenderit. At consectetur quisquam eos voluptatibus repellat. Quae animi quae iure modi asperiores quo doloremque eveniet quae.

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