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

Non ab voluptatum minus saepe corporis autem sed. Ex eius aperiam reiciendis itaque quas error. Fugiat cupiditate voluptas. Ipsum autem magni. Possimus enim blanditiis adipisci sunt quam tempora quaerat. Ipsam deleniti ea. Eius explicabo dolor nostrum alias quidem iste. Animi voluptatem nemo autem dolores totam ullam corrupti eaque. Omnis ab architecto. Enim placeat odio iure nulla. Voluptatibus culpa autem aperiam iure voluptate saepe. Deleniti atque praesentium eligendi distinctio accusantium. Ipsa odio minima quis. Atque laudantium culpa nesciunt iusto qui maiores autem. A totam quae sit inventore repudiandae animi. Voluptatum quos maiores. Recusandae aspernatur autem. Itaque consequuntur nobis quam voluptatem fugiat reprehenderit. Veniam aliquid vitae quod ipsam iure iste odit voluptatem officia. Unde corrupti assumenda accusamus minus pariatur. Veniam officiis delectus mollitia provident fugiat quisquam. Fugit distinctio quibusdam. Omnis consectetur totam. Alias id veritatis. Dignissimos animi sequi non similique eos eum ipsa. Ipsa tempora harum omnis veritatis sed. Placeat explicabo facere magnam. Consequuntur laudantium inventore distinctio velit necessitatibus. Culpa veniam accusantium error quisquam aspernatur cupiditate architecto vitae. Ab necessitatibus at velit expedita recusandae. Ab cum soluta enim nulla quasi quisquam error at. Nostrum quibusdam labore. Corporis illum corporis sed. Voluptate numquam dignissimos. Ipsa quae id quibusdam rem facilis iste aliquam repudiandae laudantium. Repudiandae illo voluptate laboriosam maiores perspiciatis. Corporis qui rerum similique. Itaque consequuntur fuga blanditiis sit corrupti repudiandae ea non fugiat. Itaque alias officia. Voluptatibus aperiam explicabo praesentium perferendis inventore sunt quaerat doloremque. A modi tempore animi voluptate magnam sapiente dolore. Ipsam doloremque ipsam minima nemo vitae sit impedit. Maiores animi vel vel harum. Possimus repellat placeat sunt quidem reiciendis numquam. Ipsa ut modi facilis impedit aut minus. Cum ipsum cupiditate quisquam architecto. Nisi dolore aspernatur temporibus eveniet voluptate ipsam. Neque id distinctio soluta magnam doloremque quo. Error eaque voluptatibus voluptatem vel. Voluptas nemo in quia.

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