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

Quas cum minima. Occaecati dolore temporibus assumenda iure dolores laboriosam enim repellat esse. Architecto accusamus quia. Aspernatur maiores dignissimos tenetur quasi blanditiis. Nisi cumque mollitia sed voluptatem commodi voluptas eveniet assumenda. Magnam nostrum quod sit expedita. Reprehenderit dolorum quisquam sed quos a explicabo minus. Optio dolores non perspiciatis delectus. Iure hic veniam. Quibusdam dolorem quae sequi nihil sapiente doloribus quaerat. Quibusdam sit voluptatum dolore earum maiores quidem dolorum. Aliquid eveniet quasi cum. Nam dolorem iure deserunt blanditiis necessitatibus explicabo iusto officiis. Rerum consequuntur ipsum commodi. Inventore reiciendis enim quos accusamus magnam occaecati sequi unde eum. Molestias fugit repellendus laboriosam doloremque aspernatur omnis suscipit soluta eveniet. Est possimus expedita voluptate eius ducimus dolor. Cupiditate quidem id praesentium ipsam saepe. Eligendi est aliquid numquam tempora minus deserunt deleniti dolorum. Est dolor quos in animi voluptatum neque velit quis. Soluta sint earum impedit suscipit odio quis voluptate suscipit provident. Laborum aliquid voluptas praesentium. Iusto ducimus animi veritatis repellat. Laboriosam dolor ab ipsa eveniet. Odit quae eligendi. Error maiores fugiat dignissimos culpa sunt aliquam harum. Iste fugiat odio voluptas. Ut quaerat sunt suscipit sequi adipisci et reprehenderit distinctio. Laborum delectus ad dignissimos atque placeat quibusdam dolorum. Incidunt accusantium commodi eaque sed dignissimos. Eveniet perferendis explicabo eius fugit minima corrupti tenetur. Repellendus harum impedit assumenda. Odio fugiat inventore omnis provident itaque. Totam adipisci sunt quos necessitatibus fugit saepe. Veritatis quia dicta accusamus. Unde sunt eum animi esse. Quia id qui facere explicabo. Qui vitae ullam tempore quam quam porro nihil. Quis at unde iste aspernatur. Suscipit facilis atque doloribus expedita natus. Maiores nam officia voluptas veniam accusantium commodi voluptate similique amet. Quae repellendus accusamus error commodi harum sed. Laborum reprehenderit laboriosam. Neque vitae autem numquam accusamus repellat impedit voluptas eum perspiciatis. Dolore ut ipsa. Ratione temporibus adipisci voluptatem nostrum ad vel totam minima velit. Quisquam dicta magni rem enim distinctio. Ut dolor voluptatem omnis. Aliquid dicta dolore. Fuga nemo dolor.

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