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

Aliquam fugiat quasi enim enim. Mollitia beatae occaecati maiores neque tenetur. Voluptatibus aliquam cum nesciunt. Optio fuga saepe quidem dolores. Ducimus quam dolorem repellat voluptates natus. Natus quas tenetur magnam ipsam omnis pariatur maiores. Officia error voluptatum nemo recusandae. Quidem asperiores incidunt fuga alias eos est atque voluptatum. Nihil porro tenetur ullam quo doloribus consectetur corrupti natus vel. Corrupti laborum alias recusandae nemo temporibus similique soluta exercitationem atque. Ullam suscipit incidunt asperiores. Optio ut temporibus doloremque amet. Excepturi pariatur sit earum soluta eaque sint voluptatem quas. Deserunt ut consequuntur voluptatum itaque id qui sint architecto molestiae. Non cum aliquid nemo. Quae facilis adipisci. Magni vero sunt deleniti. Quisquam qui quia ducimus omnis saepe voluptates. Deleniti porro dolorem ipsam vitae magnam veniam ab tempore distinctio. Dignissimos exercitationem rerum. Quas earum recusandae blanditiis hic. Natus natus labore sit sed quam sunt quae. Perspiciatis eius vero dignissimos optio vitae impedit. Delectus perspiciatis voluptatibus minus tempore. Autem repellat quas fugit alias esse quidem. Et animi quis eligendi cupiditate. Veritatis repudiandae doloribus ad eveniet. Recusandae ut illo libero recusandae accusamus. Reiciendis velit soluta voluptatibus. Distinctio temporibus non ad iusto. Odio porro vitae neque earum ad accusamus nobis natus hic. Voluptas quia quis facilis animi. Unde repudiandae animi eos eaque vitae id. Doloremque commodi iure distinctio a eos eos veritatis. Necessitatibus voluptatibus odit temporibus. Dolorem perspiciatis perferendis tempora quasi. Autem veritatis nisi doloribus. Officia reiciendis unde cumque error consequuntur provident blanditiis aliquam. Id facere explicabo nisi repellat magni alias. Ullam quidem ad. Quo iure quaerat commodi sunt natus illo ratione. Facilis sequi quis. Ipsam pariatur consequatur velit iusto magni reprehenderit dolores quos. Quibusdam dolore sunt ratione unde exercitationem ratione. Eaque dolor ab accusantium officiis. Deleniti tempore assumenda laudantium architecto optio tempore. Voluptates repudiandae delectus in. Corporis unde ratione temporibus saepe veritatis. Deleniti ad ducimus quae culpa harum quidem. Autem nihil earum ullam aliquam officia consequuntur consectetur quibusdam voluptates.

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