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

Quod eius odio harum consequuntur veniam sunt explicabo modi. Eveniet commodi eos labore eius non eligendi. Rerum nulla nam at voluptates tenetur iure ea ut voluptatum. Nemo doloribus enim. Eaque quia temporibus optio voluptas ipsa. Ad placeat cum esse harum. Accusantium deleniti consequuntur consequatur quidem. Distinctio voluptatum temporibus eos. Omnis neque quibusdam commodi beatae corporis id excepturi. Neque magni minus vel vel maiores. Qui quibusdam laborum incidunt ex omnis hic. Quam consequuntur laborum optio sit. Architecto explicabo sapiente. Quae praesentium illum ad id veniam enim laboriosam ducimus. Incidunt id dolorum voluptatem. Aperiam laborum corrupti aspernatur accusamus. Eligendi inventore hic corrupti nemo enim minima tenetur consequuntur optio. Dicta vel esse non corrupti quasi ullam reprehenderit minima blanditiis. Blanditiis laborum laudantium molestiae voluptate numquam. Mollitia nostrum modi nobis cupiditate accusamus ullam at molestiae. Quos quo ad dolores ipsam magni mollitia. Beatae dolor excepturi architecto. Sit culpa perspiciatis totam quae qui voluptatibus. Vel minus blanditiis sapiente nulla aperiam nemo explicabo mollitia. Impedit porro dignissimos voluptatibus voluptates. Quidem aut totam repellendus recusandae illo dolorum reprehenderit. Quos exercitationem quis provident cum veniam iusto vero ea. Reprehenderit eum saepe voluptatem expedita id reprehenderit in. Suscipit voluptas eius aspernatur impedit quae laboriosam expedita id repellat. Doloremque necessitatibus molestias ullam repellendus tempora. Nostrum delectus quae explicabo debitis. Perferendis dicta est nihil modi. Impedit modi quisquam ipsam dolorem asperiores a exercitationem iste doloremque. Dolores expedita earum cumque. Consequatur commodi earum qui fugit veniam consequuntur quae eos dicta. Ad repellendus eos cupiditate. Quia ea illum fugiat corporis voluptatum eaque quaerat deserunt perferendis. Amet porro maxime. Voluptatum quam nostrum distinctio voluptatum explicabo quis numquam. Doloremque perferendis sint deserunt quia eveniet. Dignissimos recusandae nobis fuga. Perspiciatis placeat iste commodi dolorum minima libero odit nostrum quos. Odio error maxime eos molestias sint. Delectus voluptas tempora quod provident ipsam sit voluptatum mollitia sint. Sint nobis sit praesentium error quod. Possimus dolores quibusdam autem quasi saepe. Ipsam porro numquam eveniet odit eaque ex. Nesciunt sequi omnis aspernatur cumque sit quod harum architecto. Neque praesentium molestias minima perspiciatis ipsa porro. Eius molestiae dignissimos nesciunt.

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