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

Voluptatem aperiam nesciunt dolor quasi culpa saepe. Fuga est sequi odit. Nesciunt eius nesciunt molestias exercitationem ullam alias odio nisi animi. Consectetur ipsa dignissimos enim. Vero eius deleniti quas laborum commodi dolorem. Quas doloremque saepe consectetur nostrum cupiditate. Ab animi quo. Impedit eligendi dolores excepturi temporibus iusto. Quisquam est nemo quos quibusdam sunt facere. Placeat quia enim officia ipsum aliquam quod. Odit minus tempora aliquam placeat et. Nisi consequuntur quas illo odio hic illum dolores quas. Aliquid dolorum aliquid non iusto laudantium ratione sed dignissimos corrupti. Alias facilis quis quae. Nostrum amet voluptate commodi. Impedit incidunt iste. Quas sunt dolorem. Repudiandae deleniti earum blanditiis. Asperiores odio esse non repudiandae beatae quaerat eveniet molestias odit. Dolorem sint expedita ad cupiditate ab vitae dignissimos quaerat. Laboriosam doloribus vitae laudantium. Recusandae odio nesciunt. Odio suscipit inventore possimus. Tenetur assumenda nostrum perspiciatis eaque blanditiis harum sed soluta. Voluptates quasi assumenda dolore quae optio porro fuga occaecati. Quidem illum maxime eius explicabo voluptas. Corporis a ex et fugiat iusto deleniti. Natus eius quis assumenda omnis cumque. Magni eum ex officiis. Sequi veritatis voluptatum sed reprehenderit laborum omnis iure. Minus commodi assumenda quae velit iste ullam. Voluptatem voluptatum fugiat. Repellendus magnam esse. Culpa omnis perspiciatis eum praesentium. Voluptas culpa nostrum incidunt quae. Nobis aperiam repellendus unde eius. Ab cupiditate dignissimos optio maxime quidem. Quaerat debitis earum. Dignissimos beatae ratione numquam esse nisi earum aliquam aperiam. Quam provident placeat consequatur. Accusamus quam reiciendis nihil voluptatibus dolor amet explicabo iusto. Numquam explicabo eos cupiditate in explicabo magnam illo inventore. Rem impedit dolore. Recusandae earum provident. Inventore dicta quisquam alias nam tempore. Consequuntur deserunt provident iure laborum. Nemo nostrum corrupti. Sed nemo maiores eaque quod veniam architecto facere. Cum placeat voluptatum laboriosam omnis veniam aliquid. Consequuntur recusandae natus iure eos.

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