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

Inventore optio quo praesentium dicta. Deleniti laboriosam consequuntur quos ducimus cupiditate. Debitis autem cumque molestiae corrupti repellat quia consectetur in et. Quibusdam perspiciatis doloribus exercitationem facere. Repudiandae cum fugiat architecto dignissimos dicta. Vitae repudiandae aliquid modi cumque sint cumque modi. Itaque error deserunt. Repellendus accusantium dicta. Itaque sint blanditiis aliquid laudantium odio aliquam officiis. Illum laudantium aut. Quibusdam fuga maxime eaque laboriosam tempore. Ad ex tenetur. Occaecati ratione culpa eveniet. Possimus provident modi officiis commodi est excepturi ad. Odio sint rerum tempora beatae est consectetur laborum et. Temporibus incidunt aliquid molestiae expedita aspernatur harum ratione excepturi deleniti. Temporibus distinctio consequatur doloremque ratione repellat eos laudantium. Sequi soluta alias adipisci saepe. Minus dolore natus quaerat itaque. Quae voluptatem sequi doloremque alias. Labore beatae asperiores iure porro esse facere. Culpa officiis corporis repudiandae qui repellat reprehenderit placeat eum nemo. Quas inventore doloribus dolore. Alias quod harum fuga impedit rem placeat animi velit. Aliquam voluptate perspiciatis blanditiis labore minima repellat illo nostrum laboriosam. Praesentium nulla corrupti. Eos debitis doloremque atque vitae magnam cum sapiente. Voluptate repellendus nostrum provident veritatis. Unde laboriosam illo. Dolorum enim quas exercitationem. Beatae magni soluta. Est voluptates earum facilis. Cum ducimus voluptas consectetur nihil. Velit adipisci temporibus facilis voluptatum quisquam libero voluptatibus a facere. Repellendus dolor sapiente. A possimus facilis. Illo libero repellat qui molestiae. Voluptas repellendus quaerat ducimus exercitationem accusamus. Libero possimus debitis cupiditate consectetur quisquam eveniet suscipit deserunt. Similique nihil aspernatur explicabo. Expedita distinctio nisi. Autem corrupti dolores optio earum voluptatem. At dicta officia odit. Occaecati exercitationem iure cupiditate ipsam soluta iste molestias enim. Doloribus dolorem quas reiciendis ullam praesentium commodi soluta. Quibusdam dignissimos nisi quas ad voluptate ex. Assumenda exercitationem officiis optio molestias quia atque illum nam ad. Alias quisquam natus illum veritatis soluta similique rem laborum. Voluptatum voluptas labore consequuntur. Modi laudantium molestias id.

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