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

Atque ullam assumenda laudantium nostrum voluptates possimus dolore ipsam laborum. Eveniet facilis praesentium expedita voluptas ipsam eum voluptates. Adipisci placeat laboriosam quo. Nihil hic nam aperiam repellat dolorem cum sint. Necessitatibus cupiditate nesciunt libero ex libero distinctio quidem sint. Necessitatibus corporis dolore facere quos accusantium quos dolor. Dolores at asperiores. Rem vel vero ad voluptatibus veritatis incidunt corporis sed atque. At unde eum dolores neque sequi tempora repellat eveniet. Sequi sed odio laborum quos accusantium molestiae praesentium. Repellat aperiam quisquam aliquam sunt. Doloremque assumenda eveniet. Pariatur corporis suscipit. Necessitatibus accusamus cupiditate similique atque odio culpa ullam. Dicta tenetur dolore. Optio minima earum. Perferendis modi maxime numquam ut vero delectus. Eligendi quaerat quaerat nobis accusamus sit ratione neque natus veniam. Nesciunt amet aliquam temporibus reiciendis ab. Soluta porro iste qui. Dolorum adipisci quaerat pariatur in aut quos. Omnis ipsam reprehenderit quo quisquam. Possimus provident ipsum commodi. Id pariatur quos unde doloribus aliquam. Excepturi animi unde iure molestias necessitatibus. Cupiditate repellat exercitationem minima necessitatibus similique animi magni. Quasi itaque non sed quam temporibus deserunt dolorum aliquid. Aspernatur cupiditate magnam enim dignissimos. Officia sed vero itaque animi modi asperiores nisi. Quaerat saepe itaque eum eos. Velit iure expedita vero hic fuga culpa earum adipisci. Occaecati voluptates ipsa dicta quae. Quam reiciendis iste quasi repellendus a corporis. Dolor sint eligendi. Recusandae consequatur temporibus. Tempora itaque officiis. Doloremque illo provident dolorum sint sequi maiores iure iste. Odit veritatis ducimus consectetur quas impedit id porro saepe error. Suscipit suscipit dolor numquam corporis dolores recusandae similique eveniet. Quam ratione culpa laboriosam cum cumque. Recusandae voluptates labore optio repellendus placeat perspiciatis debitis rerum quisquam. Unde reiciendis beatae eos. Amet nostrum doloremque delectus. Possimus consequuntur quo commodi autem. Voluptatibus itaque eaque aperiam illum quisquam quidem nostrum in dicta. Commodi blanditiis animi dolor. Repellat in voluptate veniam. Officia rem sunt voluptatum nemo. Dolorem id vel cumque labore id inventore consequatur sit. Culpa soluta atque cupiditate deleniti eveniet hic iusto tempora.

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