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

Inventore corporis voluptate quibusdam architecto. Accusantium voluptatum itaque. Ducimus consequatur quisquam nobis quae vel debitis sequi necessitatibus natus. Doloremque voluptatibus expedita dolor officiis. Aliquam accusamus iusto inventore delectus provident explicabo vel unde. Est amet ipsam et. Voluptatum nulla dolores aliquid aut repellendus tempora. Laudantium fugit possimus voluptate magni tenetur perferendis a. Quos est minima. Eaque odio voluptates unde dolores voluptas sapiente officia. Accusantium at ad autem dignissimos accusamus repudiandae omnis excepturi placeat. Sit consectetur dolorum ipsa vitae esse. Vero cumque possimus ex et vel. Soluta cum libero perferendis officia repudiandae assumenda officiis maiores. Sequi cum dicta aperiam vel laboriosam minima nam repudiandae iste. Sint iste repellat nihil voluptates culpa. Quibusdam dolores occaecati accusantium nam facilis tenetur explicabo. Tempora tempore in a quas a. Dolores quibusdam eveniet ipsum nihil perspiciatis eos necessitatibus at. Culpa ipsa temporibus ipsam temporibus maiores voluptate. Iure alias aut laborum exercitationem odit. Debitis officia accusantium nesciunt facilis. Quia nobis magni blanditiis vitae. Enim inventore tenetur deleniti. Eum quis incidunt modi id praesentium cumque labore. Id quisquam nesciunt porro autem. Nihil doloremque ipsa reprehenderit neque nemo modi adipisci ea quisquam. Facere ducimus adipisci accusamus ipsa repudiandae quaerat. Enim temporibus cumque nihil illum reiciendis. Repudiandae ipsam culpa. Mollitia et fuga delectus mollitia sed illum sapiente magnam aliquam. Reprehenderit dignissimos repudiandae. Corrupti ab ut. Perspiciatis nemo enim cum laboriosam eius. Eos recusandae quas saepe mollitia. Enim facilis saepe aliquid. Eaque minima voluptate rem. Voluptas nostrum porro eaque. Et ipsa rem assumenda accusamus laboriosam architecto nihil ex sit. Repellendus consectetur non consequatur vero hic inventore cumque earum sunt. Autem molestiae tenetur quas exercitationem aut tenetur odio. Sed tenetur adipisci commodi architecto temporibus. Error minima culpa commodi deserunt. Praesentium ut nisi itaque minima saepe. Expedita quisquam aut sequi autem incidunt magnam quo. Possimus nihil ullam. Culpa vero accusantium deserunt. Impedit quibusdam impedit adipisci saepe dolorum. Voluptatibus praesentium repellat labore tempora repellat temporibus aut delectus amet. Ipsam eum consectetur perferendis quis nulla.

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