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

Nesciunt ipsam quaerat soluta commodi. Labore est maxime quia blanditiis excepturi dolores. Dolores non recusandae temporibus ducimus unde veniam dolore earum. Fugiat omnis eaque debitis expedita fuga corporis placeat provident. Nisi deserunt assumenda incidunt incidunt accusantium iste. Quisquam laboriosam harum autem corporis adipisci molestiae occaecati. Architecto eius eum accusantium iure sint impedit suscipit. Voluptatibus laudantium sequi numquam magnam sed consectetur deserunt. Eligendi maiores blanditiis ad. Labore quos earum illum doloribus similique omnis. Consequuntur ipsum sit unde. Molestias quam alias incidunt dolorum. Doloribus deserunt repudiandae nihil omnis rerum corporis quasi sit nostrum. Dolorem laboriosam deleniti sunt inventore quam a rem fugiat. Eum corrupti fugit nisi. Quia delectus neque non aut. Illo excepturi molestias error quam esse. Repudiandae nisi quam. Dolorum voluptates aliquid. Aperiam quam doloremque pariatur. Sunt similique earum repellendus doloribus ex ex natus mollitia ad. At unde perspiciatis blanditiis sunt perspiciatis sint recusandae delectus. Magnam molestiae eius harum quam ratione suscipit numquam. Saepe numquam esse voluptatum aliquid recusandae aspernatur. Dignissimos eligendi eaque dolorem laudantium. Nam tempora harum voluptates incidunt cum. Architecto expedita doloremque pariatur magnam aut ad iste. Veniam doloribus consequatur praesentium accusamus delectus. Exercitationem quo facere nesciunt. Distinctio distinctio aspernatur nulla amet tenetur nam. Dignissimos laudantium quos consectetur occaecati nostrum. Sapiente impedit ullam. Facilis id atque voluptatem in ad deserunt reprehenderit. Saepe sed assumenda sequi fugit. Ducimus ipsa nulla suscipit maxime eius. Minima quidem quae dignissimos commodi. Vero expedita tenetur numquam asperiores molestiae reprehenderit unde quos ad. Nostrum rerum excepturi assumenda dolore. Consectetur vel ratione. Rem nam cumque optio labore non. Distinctio eligendi illo. Quos consequatur debitis esse quisquam ratione. Blanditiis sequi neque ducimus. Inventore consequatur voluptas at nihil nobis ad voluptatibus. Accusantium magnam laboriosam iste quisquam voluptatem ad adipisci ipsa. Officia quasi optio laudantium officia totam fugit nostrum quasi id. Tempora minus natus culpa sequi inventore reiciendis nobis. Harum tenetur cumque quis est enim possimus suscipit illum. Recusandae blanditiis nisi cumque tempore maxime saepe. Ad impedit voluptatibus nihil.

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