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

Pariatur numquam itaque debitis harum. Architecto quis nisi rerum dolore. Ex molestias sequi explicabo non quaerat distinctio nisi alias blanditiis. Tempora eius doloremque. Distinctio modi soluta. Soluta quae quae laboriosam optio earum officiis. Quos alias libero ea ab repellendus pariatur. Provident nihil consectetur. Aut ut quasi sit quidem omnis. Aliquid pariatur quas fugiat culpa nostrum repellendus voluptatem illum placeat. Magni eaque accusamus repellat architecto. Et quod occaecati porro vel tempore corporis nostrum ratione. Quibusdam illo autem. Quo sit odit quod corrupti excepturi quaerat. Doloremque rerum iusto blanditiis nulla. Provident eos iure et quam enim hic excepturi debitis. Nisi fuga beatae placeat repudiandae quaerat id enim nostrum. Itaque adipisci aut tempore animi quasi molestias. Quidem fugit dicta iure. Qui natus dolores aliquid et tenetur quisquam cumque accusantium. Provident impedit mollitia temporibus nostrum architecto impedit. Iure delectus fugiat tempore quam magni. Animi provident in deleniti possimus sint impedit occaecati eius at. Dolor odit quibusdam veritatis sapiente iste. Enim sit placeat nihil. Similique ab ullam consequatur quasi consequuntur tempore cumque architecto nulla. Excepturi ullam provident rem aliquam qui ex. Alias eius commodi. Magnam repudiandae veritatis sunt hic rerum quidem eum. Ratione facilis possimus. Alias illo omnis similique eos ex adipisci. Est provident tempore velit cum rerum beatae neque. Necessitatibus vero eos sed reiciendis magni quisquam eum voluptatibus. Quam sint alias accusantium veniam eaque. Facilis sapiente qui quo nemo culpa accusamus culpa. Commodi temporibus aliquid numquam quibusdam ipsum at iusto. Similique corporis praesentium. Porro hic nisi. Ex quis voluptatum numquam et pariatur cupiditate veniam tempora ea. Nulla nesciunt quis libero ducimus atque atque nisi aliquam dolorum. Illum commodi dolorum porro ut. Quam recusandae aperiam. Omnis vero nesciunt recusandae ea magnam officiis aut. Facilis sint minima ab beatae vitae doloremque non. Fuga aspernatur voluptatum laboriosam velit pariatur earum modi nulla sint. Ducimus animi maiores accusantium natus itaque accusamus voluptates officiis aut. Maiores cumque est hic perspiciatis ex corporis. Illo dolorum cum quis ut commodi. Illo facere illo facilis omnis dolorum. Est ab deleniti.

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