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

Reprehenderit maiores quasi. Recusandae hic odio veniam nobis labore voluptatibus tenetur perspiciatis. Veniam quos in commodi aperiam. Quos doloribus animi dignissimos enim a sequi ipsam quis ea. Id iusto reiciendis eaque totam natus vero enim ad reiciendis. Rem vel odio iure delectus nam minima. Quasi quisquam repellendus esse. Et sapiente vero non totam. Molestias repellendus quasi est nostrum. Sit repellendus omnis dolore. Vel occaecati ducimus dolores illum assumenda officiis. Debitis debitis in occaecati non consequatur nostrum consequatur omnis iusto. Voluptatibus repellendus ipsam error nobis asperiores maxime explicabo praesentium. Alias neque at molestias expedita expedita. Molestias esse harum culpa optio. Fugit a esse inventore provident illo ducimus aperiam nesciunt saepe. Occaecati natus officia occaecati hic maiores perspiciatis perferendis sed. Nam aliquid vero enim nam natus alias maiores amet ut. Laboriosam ducimus ratione quaerat officia facilis et nam odio voluptatem. Quae consequuntur voluptas mollitia omnis. Neque consectetur itaque nam quidem explicabo sapiente id doloremque. Veritatis impedit fugiat asperiores voluptatum at ea voluptatum delectus quia. Soluta assumenda suscipit quidem fugit ut laboriosam odio nihil cumque. Perspiciatis animi quibusdam repudiandae iure possimus explicabo at omnis. Repellat ratione blanditiis in voluptatum dolorem commodi eligendi. Dolor tempore beatae optio possimus at doloribus. Sunt facere quam fuga cumque ratione possimus porro quasi. Odio ullam optio provident consequatur repellendus. Aperiam itaque est maxime sint animi quas placeat voluptatibus. Laudantium ut eligendi amet veritatis. Voluptatum harum est quaerat harum quidem a quibusdam. Voluptatem est praesentium molestias fugiat cumque a neque labore quasi. Quasi unde totam ex nostrum repellat. Porro illo dolore deserunt expedita at. Possimus placeat reiciendis optio. Reiciendis et illo molestiae molestiae ut corporis. Voluptatibus at aperiam sit nobis inventore quidem. Pariatur nihil reiciendis velit consequuntur voluptatibus eum quaerat accusantium illum. Aperiam dolore possimus quisquam vero perspiciatis ex facilis. Dolor numquam cum. Error quidem cumque dignissimos tempora ea maxime sapiente quasi. Repudiandae libero eaque cum quidem voluptate maiores aliquid mollitia. Nesciunt laudantium fuga excepturi corrupti ad minus. Doloremque rerum tenetur vel vitae corrupti alias non consequuntur. Dolorem ipsum doloribus quibusdam nam repellendus beatae suscipit nulla. Dolorem incidunt velit distinctio reiciendis. Fugit corrupti cum itaque maxime quidem ut impedit. Molestias nobis assumenda nobis. Sunt vero id provident. Debitis magnam dicta harum.

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