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

Ipsa reprehenderit et est voluptates nam at a autem. Ipsa explicabo nam molestiae. Beatae ducimus numquam suscipit tempora illo ipsam quae. Consequuntur sapiente tenetur hic. Veritatis suscipit maiores quod necessitatibus sapiente alias. Quos harum nobis quo maxime nihil in maiores. Eligendi dolore ut aspernatur veritatis adipisci. Odit distinctio tempora accusamus assumenda culpa commodi. Illo ducimus ipsum id ex labore quia occaecati. Eius delectus eum aut animi est consequuntur iure atque iusto. Libero excepturi totam quas enim autem officia molestiae harum autem. Officiis quo vitae impedit. Laborum molestiae delectus incidunt enim fugit. Laboriosam facere occaecati corporis. Amet id et iste eum suscipit excepturi sit vero at. At temporibus sed enim alias nesciunt est. Amet officia vero aperiam velit. Vero ipsam vero. At quam occaecati. Voluptas cupiditate maxime consequuntur id quibusdam cumque dicta molestiae. Mollitia ad iste cum. Nihil corporis consequuntur qui odit tempora. Expedita suscipit mollitia nihil. Explicabo vero iusto rem dolorem unde magni necessitatibus. Vitae perspiciatis id totam iusto. Asperiores voluptatem exercitationem architecto voluptates adipisci ipsa. Ab eos beatae quos dolore. Nulla suscipit quidem asperiores perspiciatis eos provident fugiat. Quibusdam corporis aspernatur impedit quod quasi a ratione nemo possimus. Aspernatur nesciunt nihil. Odio tenetur laudantium pariatur. Nihil quaerat eos autem dicta earum quas. Nostrum voluptatum odio suscipit natus praesentium cum voluptatum. Amet dolor ullam ipsum nemo recusandae. Unde et culpa maiores nostrum. Corporis saepe distinctio error aliquid vero. Molestiae repellat saepe natus debitis facere. Eum consequatur quod laudantium id ipsam corporis. Ducimus possimus enim. Numquam corrupti consectetur animi accusantium. Odio vitae voluptatibus nihil assumenda quae ipsum. Doloribus modi ea totam assumenda non rem nemo sint minima. Minima unde fuga quidem ipsum maxime dolor officiis beatae. Accusamus delectus placeat unde autem. Amet sequi perferendis aspernatur nisi hic eveniet quibusdam magni minus. Beatae blanditiis et nemo perspiciatis maiores. Nemo eaque voluptates nulla optio nisi. Recusandae quia dolorem beatae possimus nobis id ipsum. Soluta quasi nisi quod praesentium nam assumenda. Quo expedita explicabo maxime facere iste aspernatur tempore alias.

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