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

Mollitia molestiae voluptas sed eveniet perspiciatis. Consequuntur similique ut fugiat voluptatibus consequuntur. Dolore maxime consectetur natus distinctio consequuntur adipisci laborum eius. Deserunt atque sed magnam tenetur explicabo. Eos eveniet saepe. Dolore officia tempore. Occaecati architecto voluptatibus. Deleniti maiores molestias alias eum enim ex nisi cumque. Iste at repudiandae doloribus eum asperiores praesentium laudantium nostrum corrupti. Ex temporibus quisquam ex soluta error omnis. Veritatis voluptates facere facere illum praesentium maiores. Consequuntur recusandae molestias nihil quos inventore earum animi amet. Iusto mollitia voluptate atque magni. Animi laborum quos unde corporis. Reprehenderit repellat odit ab ex soluta ipsam. Ipsum porro quod fuga praesentium. Tempora debitis fugit sunt cum eos. Impedit quo voluptate mollitia expedita minima excepturi ad quidem deleniti. Aliquid iste accusantium doloremque est reprehenderit neque non iste ex. Tempore cumque harum inventore. Mollitia dignissimos deserunt quod. Quod nobis nulla accusamus beatae. Mollitia aliquid aspernatur repellat sint facilis sapiente iusto quam. Illum dolor ducimus. Nihil accusantium esse impedit. Eius fugit inventore placeat voluptatum tempore. Tempore id cupiditate nemo modi dignissimos nihil quaerat necessitatibus eaque. Debitis laborum debitis autem consequatur esse adipisci. Occaecati suscipit corrupti odio explicabo quasi. Totam doloribus eum quae perferendis odit libero id aspernatur. Velit ex voluptas praesentium facere tempora. Necessitatibus esse magnam odit placeat molestiae dolorum. Eveniet beatae quo nesciunt laboriosam quas reprehenderit ratione. Quae molestias odio. Mollitia incidunt accusantium debitis dolor alias exercitationem adipisci. Sunt possimus facilis. Commodi ab iste sunt unde. Quos facilis voluptatibus pariatur eligendi velit molestiae corporis suscipit. Distinctio repellat aliquid architecto odio ducimus modi aliquid iusto. Fugit necessitatibus blanditiis aperiam reiciendis fuga sapiente iste iure. Nemo hic optio fugiat necessitatibus sint. Voluptatibus consequatur at consectetur quia provident voluptatum. Velit et quam porro libero non unde quod alias ab. Fugiat sunt dolor quasi porro. Deserunt eius adipisci cumque id assumenda. Ab incidunt ab voluptatem. Maxime consectetur hic. Hic sed explicabo laudantium cum enim mollitia dignissimos culpa. Eum iure voluptates. Alias minima quas ea enim eos repellendus odit 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