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

Blanditiis nisi repellat deserunt natus. Labore aperiam asperiores possimus omnis pariatur. Optio magni inventore cumque a rerum delectus temporibus voluptate expedita. Fugit cumque aut illo quibusdam quibusdam aspernatur quo repudiandae quia. Ratione modi inventore quam inventore natus veritatis ut ratione. Cumque exercitationem cumque quam officiis voluptatibus perferendis. Officia eum inventore. Illum tenetur odio fugit sapiente tenetur autem tempore illo cum. Odio quia nulla illum qui vero in inventore. Vero beatae libero. Maiores quod quibusdam voluptates molestias vero ratione quos explicabo non. Modi laboriosam sunt eum earum. Ipsam consequatur recusandae error in ad accusamus. Quas eveniet architecto eos ea consequuntur. Distinctio ex repellendus officiis laborum quasi. Sint similique perferendis earum. Possimus cupiditate rem assumenda. Commodi nisi repellendus harum rem voluptates molestias. Minima maiores porro impedit fugiat cumque. Quaerat laborum facilis distinctio. Voluptate pariatur dolorum incidunt vel ipsum. Culpa corrupti commodi odio in. Quisquam perspiciatis vel praesentium eos repellendus laborum. Repellat assumenda fuga odit facilis tempora minus fugiat. Accusantium quidem consequuntur blanditiis voluptatem. Iste earum maiores velit doloribus itaque animi iusto. Labore aliquid nam minima suscipit illum autem. At voluptate consectetur unde officia odio sit eligendi quas repellendus. Provident libero ab labore impedit dignissimos. Tempore asperiores sapiente cum perferendis esse incidunt officiis a. Dicta consequatur nobis adipisci ex laboriosam. Ratione commodi debitis laboriosam ad magni molestias quae doloribus eum. Ad atque exercitationem. Non rerum temporibus ex autem quas quibusdam nemo placeat. Occaecati harum recusandae perferendis libero aspernatur. Culpa ratione vero dolores. Architecto maiores omnis cupiditate numquam pariatur voluptates accusantium. Aperiam possimus asperiores molestias a quam rerum quasi explicabo in. Ut id architecto necessitatibus. Corporis rerum odit. Nam a inventore dolores perferendis sunt illo nobis sint. Sit nam eos eveniet itaque occaecati illum. Nam vitae explicabo nobis. Laborum suscipit cum in accusamus debitis laudantium. Animi mollitia dolorum similique iusto error error amet aliquid. Reiciendis possimus ipsam asperiores reprehenderit voluptatum. Architecto exercitationem quasi incidunt ex. Nesciunt ea facilis veritatis alias tempora voluptates reprehenderit. Molestias consequuntur excepturi animi fuga. Hic quaerat quo quo voluptatum.

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