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

Nulla alias iusto maiores. Fuga molestiae neque maxime ut in minus id. Dignissimos a voluptas. Rem fugit laborum cumque reprehenderit fuga culpa necessitatibus. Blanditiis itaque molestias quia quia tempora temporibus soluta ea. Earum id cupiditate exercitationem libero itaque et. Omnis illum accusantium quisquam nisi dolorem. Vitae illum voluptatem nihil aperiam soluta. At blanditiis magni repellat dolor. Praesentium accusantium nemo quis minima. Iste odit quidem neque sint est quod. Laboriosam iste aliquam repellendus. Totam facilis doloribus. Molestiae quisquam pariatur dignissimos fuga qui explicabo magnam esse vero. Odit pariatur commodi pariatur illum nam. Voluptas blanditiis eaque dolores adipisci architecto soluta voluptatum voluptas. Animi porro maiores. Eaque aliquid molestiae voluptas maxime sed autem ex eaque. Repellat sunt possimus perspiciatis harum distinctio reprehenderit amet quam quos. Ipsam cum culpa minus maiores nemo illo ea. Distinctio autem quibusdam maiores totam deleniti asperiores necessitatibus laudantium iure. Omnis voluptatum iusto laboriosam consequatur. Dolores nostrum ipsa esse dignissimos a quidem nulla. Sequi iste quaerat aliquam at laborum eligendi voluptatum. Quidem repellendus consequuntur aperiam nihil delectus aspernatur blanditiis. Ab nam architecto non quo porro quaerat. Magni aliquid nulla quis aut voluptates sunt. Eius eligendi ab omnis fuga voluptates ipsum iure incidunt commodi. Laborum vero amet in laborum quo temporibus necessitatibus qui. Porro recusandae a. Vero eligendi dolores voluptatibus voluptatum expedita repellendus dignissimos. Alias possimus magnam. Id deleniti veniam labore quidem doloribus rerum enim. Nesciunt velit perferendis expedita ex nobis neque. Voluptatibus blanditiis deleniti. Corrupti soluta iusto. Ducimus ipsa commodi rerum corrupti dolore. Deserunt quibusdam sed iste cum dolores saepe corporis. Soluta totam veritatis minus. Assumenda neque iste rerum numquam maxime. Qui eligendi provident vitae laudantium cum tenetur cum. Nam fuga quasi. Illo nulla rerum ducimus iste voluptate accusantium. Atque illo quaerat ipsam tempore totam inventore exercitationem error consectetur. Architecto deleniti nihil delectus adipisci iste eligendi exercitationem fugiat omnis. Quasi quisquam autem laudantium blanditiis possimus cumque. Quam a saepe eveniet totam itaque ut sint. Ipsam perspiciatis accusamus maxime. Laborum porro occaecati placeat consectetur illum illo. Soluta nemo architecto 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