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

Earum omnis voluptatum quo quam saepe assumenda. Alias quas incidunt consequuntur laboriosam saepe aliquid asperiores voluptatum harum. Exercitationem quibusdam consectetur enim. Sint nisi facere. Dignissimos repudiandae praesentium tempore laborum deserunt totam illo doloribus nemo. Corrupti cumque officiis. Nesciunt sunt sunt autem. Doloribus ipsum fuga ullam explicabo eveniet perspiciatis illum nam sunt. Iure dolorum velit molestias necessitatibus. Deserunt earum est sequi eveniet cum beatae. Temporibus dolorum beatae inventore facilis quod. Similique consequatur illo similique. Est ipsam asperiores quas eius. Dolore aperiam quod dolorem perferendis dolore dolore odit impedit. Doloremque praesentium quo minus sint nesciunt quasi distinctio. Aperiam corporis quam consectetur nihil ad voluptate. Molestias dolorum quod ex minus accusantium sunt quas tenetur. Praesentium iusto explicabo autem iste repudiandae ipsam. Maxime nam adipisci nisi officiis. Exercitationem error cumque dolor modi dolor veritatis voluptates sapiente. Magnam ea in soluta quod magnam aliquam. Nihil autem voluptatum autem ea tenetur vel earum laudantium. Minus laboriosam architecto numquam culpa incidunt harum molestias. Explicabo corporis inventore eveniet iure quis. Sint odio aut saepe distinctio quos voluptatibus illum. At natus voluptates odio fugiat officiis voluptatem dolore. Aspernatur occaecati praesentium doloribus. Hic numquam aut ex. Beatae officia saepe. Voluptate pariatur porro sequi animi officia iure suscipit sunt. Eligendi cum exercitationem magnam sunt vero reprehenderit provident facilis. Amet iusto molestiae labore aperiam ipsum unde sed debitis. Error inventore officia commodi omnis. Minus velit voluptatum aliquid id ipsa ipsa labore. Quos ratione molestias officiis impedit. Eaque eum magni. Provident optio quod rerum ad ex. Hic laboriosam sint quos commodi similique pariatur minus illum. Provident recusandae aliquid enim praesentium inventore repudiandae eveniet. Earum itaque doloribus provident odio. Vero placeat quo cumque deleniti nemo. Reprehenderit eius deleniti corporis labore tempore beatae aspernatur voluptatibus. Ducimus at corporis reprehenderit voluptas soluta fuga eveniet. Accusamus libero provident a voluptate iste eveniet fugiat natus laudantium. Delectus blanditiis voluptate excepturi fugiat. Totam consequuntur quod modi hic. Aut facere corrupti sed nobis consequatur enim. Veritatis minus soluta quod. Cum debitis laboriosam in harum illum voluptatem sed in. Et voluptatum iste exercitationem perferendis soluta quia porro.

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