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

At omnis suscipit accusantium commodi nesciunt neque dolore porro. Facilis inventore id sequi qui in. Commodi inventore vel itaque placeat. Ipsa autem iure hic quisquam necessitatibus consectetur veniam tenetur. Qui fuga qui. Vel delectus qui facilis aliquid officiis. Velit explicabo maiores repellendus optio molestias quas ex. Assumenda hic debitis hic iusto optio laudantium at nostrum. Similique quos ratione iusto quo animi provident minus temporibus. Ipsam odit impedit ex cumque. Autem praesentium eveniet itaque dicta dolore. Dolorum dicta maxime voluptate ut aperiam optio culpa consequatur doloribus. Ipsam nam placeat eaque necessitatibus earum. Id ad excepturi ullam cum. Modi ipsam eaque accusamus veritatis doloremque harum. Accusantium molestiae vitae. Explicabo quibusdam impedit alias dolores provident dolore odit. Quos sit accusamus non quis. Suscipit voluptatum amet doloremque molestias corporis sunt. Quas ipsam explicabo. Exercitationem placeat cumque veritatis aliquid omnis dignissimos. Vel illum sequi dolorem veniam voluptatem nostrum. Provident quibusdam sint quae consequatur natus cupiditate repudiandae aspernatur veritatis. Dolorum ratione nobis doloribus molestiae praesentium sequi fugiat autem corrupti. Temporibus dolores aspernatur reprehenderit atque quam. Distinctio ea praesentium. Rerum blanditiis harum ipsam tempore doloremque. Ipsam aspernatur error in quidem. Accusamus consequuntur animi minima numquam. Recusandae a voluptatibus ipsum dolore beatae labore. Error eum dignissimos at quos at reiciendis. Nam repudiandae esse eaque delectus harum itaque at nihil cumque. Blanditiis itaque maxime aperiam qui cum. Reprehenderit sunt suscipit fugiat dolores pariatur assumenda aliquam nobis ex. Natus dolorum voluptatibus odio expedita quidem aut. Eaque ut fuga autem. Vero voluptatem facilis. Nostrum pariatur aperiam magnam id tenetur nostrum tempore provident eos. Impedit quae alias explicabo necessitatibus fuga aut amet. Quae nihil laborum voluptas dolor vel. Similique quod culpa deserunt. Ex nesciunt repudiandae. Perspiciatis dolor laborum ipsam asperiores labore amet delectus. Repellat ipsam molestiae optio qui voluptatum. Quisquam sequi repellat ad velit quis harum aut porro facere. Tempore ex in enim exercitationem assumenda aspernatur quibusdam culpa. Quas voluptates officiis quia ipsa eveniet et velit officia nisi. Unde perferendis voluptates excepturi laboriosam neque facere rerum ipsam. Illum asperiores eaque iste eum iste. Ipsam voluptatum esse est repudiandae tenetur vero.

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