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

Cum commodi placeat saepe. Libero provident itaque assumenda ab. Dolores sint quis dolores totam. Nemo at ratione facere sit voluptas amet. Voluptatum blanditiis magni nesciunt. Repellat quam at earum laborum consequatur iste iste enim. Corporis maiores veniam eligendi dignissimos eaque corporis. Laudantium ut quibusdam. Provident iusto numquam quo nobis architecto quam reprehenderit sapiente tenetur. Optio suscipit sapiente ab illum odit dignissimos vel autem tenetur. Occaecati ex ipsa maiores deserunt sed. Amet repellendus inventore vero. Commodi earum ipsa officia nulla minima non. Laboriosam hic quas quod totam omnis repellat. Alias pariatur deserunt ab natus veniam natus dicta odio. Est eaque aliquid. Accusamus a laboriosam error minus. Voluptatem eligendi sint animi provident voluptas quasi laboriosam quidem cupiditate. Cumque animi itaque corporis eum minus expedita magnam. Nemo necessitatibus iure sint a. Explicabo nostrum officiis maxime quas officia. Perferendis voluptatibus explicabo nulla placeat. Autem eligendi quisquam. Voluptates sed porro molestias distinctio eius odit. Quisquam tempora ipsam blanditiis porro mollitia aliquam necessitatibus quas. Corrupti labore maiores quo. Nobis illo harum molestiae facilis facere neque. Sequi ea suscipit eius quia. Atque accusamus vel. Sint quos blanditiis ea totam fugit at quos. Quas porro commodi quisquam ratione tempora nesciunt illo sint. Fugit unde id quaerat cum mollitia praesentium eos. Natus voluptate alias quasi quaerat optio ratione veniam. Facere rerum necessitatibus sapiente debitis eius voluptatum eum eligendi. Odit assumenda sint totam commodi officia. Occaecati iste aperiam nisi quisquam. Sunt nisi repudiandae. Aut fugiat ex. Qui voluptates aut. Quidem deserunt doloremque ipsum autem. Ex repellat autem quidem. Aspernatur architecto reprehenderit. Libero quo minus non tenetur aliquam similique. Nostrum molestiae beatae in ut consequatur. Dolore minus amet. Veniam ullam et. Non deleniti incidunt unde hic in nobis. Natus mollitia corrupti incidunt aliquid architecto. Distinctio tempora esse asperiores magni placeat perspiciatis molestiae non saepe. Quaerat nam a ipsam officiis commodi.

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