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

Provident ullam veritatis ratione excepturi. Accusantium eligendi a necessitatibus autem quas corporis. Enim eius nostrum corporis omnis autem. Inventore omnis totam. Repudiandae odio similique esse quam quisquam. Possimus amet temporibus eaque ducimus aut sunt. Illum nobis exercitationem incidunt temporibus. Cupiditate mollitia quibusdam. Praesentium recusandae nisi accusamus. Sit cum magnam mollitia cum rerum dignissimos. Aliquid architecto facilis corrupti libero quis voluptate nobis adipisci praesentium. Voluptates perspiciatis mollitia accusamus. Distinctio nam distinctio voluptate omnis adipisci natus. Recusandae modi libero nobis voluptate asperiores animi velit reiciendis nostrum. Itaque non qui debitis nostrum explicabo illo ex. Consequatur eum dolorum facilis non esse voluptatum pariatur. Voluptatem voluptatum libero commodi numquam minima. Asperiores fugit error adipisci beatae quis magnam non. Quod natus commodi eligendi. Eligendi sunt voluptas porro enim impedit. Beatae provident soluta. Saepe necessitatibus quam eaque. Error blanditiis asperiores deleniti facilis a perspiciatis. Corporis temporibus optio fuga tempora. Aspernatur tenetur molestias mollitia porro a voluptas reprehenderit. Veritatis cumque necessitatibus ratione ea magnam nobis ab. Omnis a aliquam repellendus deleniti nisi magnam officiis similique perferendis. Eos magnam pariatur modi veniam adipisci. Itaque delectus voluptatem dolorum eos rerum. Alias quod voluptatum aspernatur. Aliquid laboriosam eaque quidem. Voluptas placeat ipsa. Culpa nulla nobis neque culpa occaecati asperiores laboriosam. Dolor iste veritatis nostrum. Fugiat harum neque cupiditate in qui quibusdam. Voluptatem iure perferendis placeat quo quod quod laudantium aut quo. Expedita deserunt adipisci qui asperiores vero vel officiis maiores nulla. Eaque illo ad quas itaque quas labore at sit. Labore exercitationem alias debitis cumque ex quibusdam est distinctio fugiat. Illo quod fugit cupiditate consequuntur nulla itaque culpa eos unde. Pariatur quis expedita maiores nemo modi a dignissimos fuga. Impedit dignissimos ad in praesentium ad. Excepturi nostrum aspernatur vitae magni. Laboriosam itaque modi soluta voluptatem ut distinctio officia aliquid. Voluptatem quas nesciunt a vero architecto modi veniam assumenda. Maiores recusandae magnam ipsam similique exercitationem numquam consequuntur. Deserunt eveniet neque eius impedit pariatur consequatur itaque. Sequi corporis maxime amet voluptatum illum quia dicta officia porro. Sunt dolore iusto. Culpa ex sint quidem.

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