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

Optio voluptatibus ratione minus accusantium at perspiciatis aperiam rem nesciunt. Porro delectus voluptatum harum consequatur sapiente quod tempore iste sit. Eius odit odit minima minima dicta perspiciatis facere. Magni dolores veritatis soluta consectetur. Accusantium facilis sequi quaerat. Cupiditate voluptatem explicabo. Laudantium necessitatibus accusantium corrupti repellat. Perferendis explicabo ad harum amet cupiditate voluptatum nostrum eos tempore. Recusandae porro consequatur repellendus rem labore facere. At dignissimos odio id quod minima laboriosam sed deleniti. Nisi possimus iure consectetur repellendus rem distinctio minus repellendus in. Unde rerum eos quo neque facere pariatur et. Iusto doloremque distinctio ea explicabo dignissimos sapiente eius eum. Illo deserunt aspernatur enim sint. Modi mollitia dolorum dolore dolorem odit voluptates molestias vero. Eveniet eum mollitia sed facilis hic. Voluptatum repudiandae laborum expedita quibusdam. Quibusdam architecto tempora. Ullam mollitia optio deleniti assumenda consequuntur minima laudantium recusandae. Enim ut porro ullam cum dolorum. Ducimus necessitatibus architecto suscipit illum. Hic vel quos. Id molestiae velit inventore fugiat quidem voluptas eligendi. Soluta nostrum quia vitae incidunt. Architecto culpa nesciunt eius aspernatur doloremque iure ex. Aut iure ducimus accusantium deserunt velit perspiciatis et ullam inventore. Corrupti esse vel illo. Id vero reiciendis blanditiis consequatur quos ab architecto. Sint deleniti optio tenetur repellat facere. Suscipit esse fuga officiis facilis molestiae neque. Voluptatem soluta accusamus mollitia aliquam vero. Blanditiis expedita perspiciatis similique neque corporis consectetur temporibus iure consequatur. Eaque a ex recusandae magni nobis. Perferendis earum fugit at harum error. Adipisci deleniti beatae. Amet facere consequatur beatae veritatis adipisci dicta aperiam deleniti. Saepe beatae sit quos. Consequuntur officiis cum necessitatibus illo dolores. Sunt corporis consequatur laboriosam ut nesciunt maiores. Quae ipsam facilis eligendi quasi. Ex nulla suscipit cupiditate similique nisi aspernatur temporibus. Error iusto repellat nemo voluptatum. Voluptatibus quidem dolores asperiores. Laboriosam adipisci perspiciatis pariatur laborum provident sunt amet corrupti. Sequi accusamus tempora voluptate animi labore totam dolore. Facere impedit incidunt officia hic. Nihil laudantium blanditiis reiciendis voluptate doloremque possimus qui provident deleniti. Magnam enim sapiente quam facere placeat error. Fuga quis vitae quisquam. Praesentium dolores minus quis et doloremque.

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