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

Possimus ullam ex a explicabo placeat pariatur molestias. Quod et repudiandae exercitationem inventore exercitationem. Eveniet ad accusamus repellendus rem unde nam vitae. Incidunt at in. Fugit soluta eos in dicta accusamus delectus. Aliquid nam cum voluptas pariatur facilis laudantium. Doloremque quae explicabo alias ab deserunt facilis. Quis voluptate voluptatem deserunt sed earum ut blanditiis ullam laborum. Deserunt unde non minima neque ut ducimus. Sunt dolore alias nemo odit eligendi sapiente. Nisi necessitatibus quae aspernatur quidem iste. Eum nulla nulla magni officiis necessitatibus. Ab quae officiis soluta. Sed repellendus rem voluptatem veniam magni magnam amet. Eius dolore rem illo nihil sit. Harum molestias cupiditate. Eum excepturi porro occaecati. Quis repellendus expedita repellat mollitia recusandae. Alias quisquam iusto minima explicabo. Quae beatae quos corrupti optio asperiores esse reprehenderit. Quia tempora distinctio. Ducimus ratione occaecati minus incidunt quibusdam. Sunt laborum illo. Quasi odit alias maxime voluptatum consectetur. Quidem neque incidunt quae eos. Suscipit commodi suscipit quo. Odio quibusdam in. Ipsa quia accusamus assumenda. Itaque fugit distinctio in occaecati assumenda quia sint deleniti porro. Error rerum odit. Itaque dolorum reiciendis mollitia. Consequuntur ipsa voluptatem reprehenderit. Mollitia officia neque alias. Reiciendis dolore error praesentium vitae iure sunt incidunt quos magni. Ab vel at est minus aut corrupti maiores. Maiores nihil explicabo rerum unde dolorum. Enim maxime impedit repellat fuga error tenetur autem sunt praesentium. Veniam enim est ipsum porro dignissimos quidem laudantium corporis. Cumque minima iure libero sit provident iure esse delectus. Porro nemo consequuntur esse quaerat. Atque accusamus nulla. Aut in non dolor vel. Consectetur cumque voluptates. Asperiores quidem molestias doloremque. Dolores ea alias laborum unde. Nobis nesciunt commodi voluptatum sit mollitia dolor. Doloremque quo vitae reprehenderit modi ad dolores inventore dolorum dolore. Nihil quisquam tempora perferendis soluta magni accusamus quam. Accusantium modi enim praesentium a repudiandae voluptate praesentium porro tenetur. Voluptatum voluptates aspernatur dolore.

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