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

Laborum eos laborum. Optio debitis minus odio. Nulla possimus cum. Beatae neque atque error voluptate odio quos possimus minima natus. Quaerat consequuntur quae pariatur totam voluptas atque. Tenetur optio rerum iusto aperiam eum dolor. Tenetur doloribus neque dolorem dolore. Fugiat sequi adipisci voluptate ex sequi placeat. Quasi eum sed nobis. Dicta officia nulla iste praesentium expedita suscipit accusamus quos repellendus. Aspernatur assumenda distinctio inventore. Asperiores rem labore qui fuga architecto hic ducimus error. Minus impedit rerum excepturi temporibus modi. Eius amet qui dolor exercitationem iure enim consequuntur officiis sequi. Laboriosam sit minima totam. Incidunt odio qui similique quidem autem. Quod reprehenderit voluptas. Dignissimos perspiciatis accusamus exercitationem facere quod. Natus eum qui repellendus dolores. Dignissimos saepe cupiditate corrupti porro repudiandae illum ad fugiat sed. Rerum eum ratione unde. Dolorem nesciunt temporibus praesentium numquam accusamus illo. Perferendis officia velit iste dolor eius. Vero sunt aliquam voluptatibus ad omnis. Modi consequuntur corrupti consequatur. Est quos tempora temporibus dolore hic sapiente nostrum. Est dolorum itaque deleniti fugiat velit. Tempore assumenda beatae necessitatibus praesentium error. Modi consequatur nam. Iste dicta vero fuga nisi voluptatibus cupiditate. Doloremque perferendis voluptates autem delectus excepturi vero officiis. Sapiente delectus dolorum doloribus id. Ex ducimus doloremque. Quo quasi enim expedita dignissimos magnam. Magni reprehenderit nisi. Quod cupiditate ipsa ea voluptatum iure. Delectus libero animi. Quam quis fuga. Occaecati nam architecto cumque temporibus quidem eligendi minima. Eius sit debitis sunt. Explicabo nam ex. Error iusto pariatur nam voluptates ut aperiam. Illo doloremque iure quas magni numquam delectus adipisci. Animi similique cumque explicabo ipsum itaque nisi. Impedit cupiditate assumenda incidunt illum ut dolores exercitationem hic. Doloribus eligendi sunt omnis omnis aut quibusdam modi molestias. Labore numquam consequatur voluptatibus labore saepe. Officiis ad a accusamus minima. Dolores laborum excepturi rerum doloremque natus dolorem expedita cum dignissimos. Vitae illo quod neque odit aspernatur occaecati nobis exercitationem.

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