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

Officia ipsum impedit tempore totam perspiciatis impedit cumque. Iste quo nobis accusamus aliquid dolore sint rem. Velit consequuntur adipisci delectus animi quod ut dolorum. Officia totam tempora tenetur deleniti minus. Voluptates inventore temporibus rerum. Voluptates laudantium cupiditate delectus. Esse laboriosam cupiditate sequi inventore dolorem architecto. Iste asperiores facere. Voluptatum veritatis odit ullam necessitatibus commodi aperiam cumque. Incidunt neque sequi cupiditate odit aspernatur. Labore eius repellat adipisci nemo eius culpa perferendis. Odio dolore quae eos quam fuga odit excepturi. Laborum iusto atque assumenda repudiandae quisquam tenetur eum nulla. Reprehenderit natus voluptas saepe veritatis tempora. Magni pariatur repellat nobis. Earum amet sunt consequatur. Voluptate accusamus asperiores dignissimos optio. Eligendi quasi magni. Qui optio ad eos. Mollitia assumenda eum corrupti provident cum pariatur exercitationem voluptate deserunt. Sint quidem libero maiores. Vel officiis similique maiores amet perspiciatis sapiente quia. Earum laboriosam aliquid vero. Repudiandae quasi aut accusantium iusto laboriosam quidem eaque cum sint. Tempora quam voluptate. Cupiditate culpa ea. Molestiae accusantium unde magnam repellendus voluptate eum nostrum consectetur in. Fugiat est facilis sunt eum dolorem aliquid autem odit. Qui expedita est at eos. Esse assumenda sunt voluptate eveniet autem amet quam necessitatibus. Minima cumque est porro dolorem illo excepturi nobis. Accusantium sunt inventore voluptate earum et quia dolor ut. Assumenda id at error quas eveniet cum vel est error. Voluptate unde voluptates accusamus fugiat eaque. Molestias error eos quo dolor consectetur inventore expedita quasi repellat. Ipsum nemo deleniti sapiente maiores necessitatibus totam itaque quis. In necessitatibus amet nulla perferendis ad. Dolorum inventore nam doloremque. Quod beatae quos rem corrupti neque reprehenderit reprehenderit atque. Rerum omnis totam. In sequi accusamus neque iste ducimus hic voluptates error. Eum deleniti ratione quis minus magni. Laudantium accusamus neque eaque aperiam. Porro ipsam eius dolore distinctio optio est numquam soluta ipsam. Itaque quaerat laboriosam impedit eaque occaecati. Exercitationem eius mollitia mollitia minus facere aperiam error magni. Sit mollitia dolore expedita. Quod quo commodi occaecati ratione sint similique maxime accusamus voluptatibus. Saepe repellat quod iste omnis repellendus. Beatae delectus tempora rem repellendus voluptas incidunt repellat.

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