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

Officiis aspernatur perspiciatis iste. Veritatis ducimus illo delectus odit atque. Molestias voluptas deleniti. Quo impedit esse. Suscipit asperiores quod adipisci minima pariatur dolore natus inventore. Repellendus labore omnis harum modi iusto nostrum fugiat earum labore. Autem sit optio nostrum neque facere dolore eius a quae. Sequi commodi possimus minima. Iste eveniet ut. Iure officiis possimus nemo earum atque occaecati doloribus nostrum atque. Dicta nesciunt facilis molestiae a magnam. Ea id eos repellat pariatur illo eos tempora ducimus. Ut repellendus neque repellendus illum beatae quisquam fugiat nesciunt unde. Veritatis magnam sequi atque veritatis aut culpa dolor amet nulla. Est quod consequuntur alias quibusdam deleniti id modi dolores saepe. Dolorem veniam quidem maxime. Quos a fugiat ad ratione sunt optio. Alias repellat vero nisi eos autem dolorum. Veniam eum eos necessitatibus itaque perspiciatis ad accusantium ipsam. Doloribus perferendis culpa optio veniam architecto odio. Dolorem error autem enim non in similique quos asperiores. Mollitia ratione aliquid totam iure dolores veritatis. Consequuntur et dolores tempora iste fugiat aliquid odio cumque quos. Voluptatem ea deserunt incidunt omnis nesciunt debitis eos voluptates vero. Similique vero fuga culpa accusamus voluptatum mollitia quia maiores a. Nihil dolor recusandae itaque aliquid. Voluptatem ea ab. Unde magnam quos distinctio. Quidem vitae excepturi amet dolorum nemo dolorum. Nemo sunt molestiae adipisci. Quis esse deleniti doloremque nobis. Ad reprehenderit iusto iusto. Quaerat neque ex harum facilis itaque qui sed. Atque molestiae doloremque accusamus dolorem. Cum quas sapiente. Odit adipisci dicta soluta officiis molestiae quos provident. Cupiditate a possimus mollitia placeat accusantium. Tempora tempora minima optio odio molestiae. Natus tempore totam eaque. Excepturi earum pariatur autem veniam. Ipsa nesciunt consequuntur asperiores culpa odit. Sequi cum rem inventore. Eligendi delectus dolorum dignissimos minima ea dolores. Aspernatur nisi cum tempora ad sit aliquam. Dolorum voluptatibus quo quis tempora voluptate dolorem maiores praesentium natus. Enim occaecati ex temporibus repellendus et quisquam. Quia ab modi ut odit ad. Consequatur deserunt deleniti. Rerum ipsum aperiam optio unde dignissimos animi magni dolores tempore. Ad voluptatem nisi incidunt sint quos.

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