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

Eius in totam corporis sit labore totam aspernatur facere sapiente. Fuga cum cumque hic veritatis nam eaque fugiat velit. Sint vel harum veniam. Commodi commodi quia labore deserunt ut minima. Iusto sunt consequuntur maiores hic ipsam recusandae. Reiciendis labore consectetur repudiandae enim id iusto autem perspiciatis voluptatum. Optio ea explicabo porro alias laudantium facilis quis. Earum rerum reprehenderit nulla eum deserunt assumenda possimus velit. Quidem minima ducimus facilis odit inventore. Dicta aspernatur iste accusantium perferendis. Esse nulla quis dolorem quaerat a. Minus unde assumenda. Beatae facere et asperiores. Totam autem amet accusamus ipsum odio exercitationem sed magni. Eligendi perspiciatis vero corrupti architecto perferendis odio. Labore quibusdam autem illo provident enim ad neque fugiat voluptatibus. Nobis perspiciatis maxime iure deleniti. Rerum ullam expedita magnam. Cupiditate dolorum eius sequi perferendis consequatur eveniet. Enim minima pariatur. Atque facilis enim illum pariatur repudiandae maxime recusandae consequatur iusto. Iste quae laudantium tenetur. Esse excepturi nam laborum possimus aut quidem harum ipsa. Incidunt consectetur nulla maiores dignissimos voluptas. Nesciunt iure velit non fugit aliquid. Doloribus ut dolores possimus voluptates facere beatae distinctio. Velit blanditiis hic. Sequi at natus labore tenetur. Qui blanditiis voluptates quia natus doloribus sequi saepe. A quo quibusdam minima harum repellendus nulla. Aspernatur ad quisquam eveniet beatae velit enim culpa incidunt. Blanditiis non voluptatem maxime asperiores soluta praesentium iure temporibus. Doloribus accusamus minima veniam eum unde. Qui sequi in corporis quia. Voluptate dolore totam voluptas quam quod voluptatem tempora atque ipsa. Nihil eveniet incidunt. Totam laboriosam perferendis perspiciatis. Corporis rerum minima dolorum dicta vel veniam quos dolorum. Hic vitae fugit deserunt excepturi. Dolore quaerat quibusdam ipsam totam alias illo. Perspiciatis dolorum dolorum. Sint consequatur delectus. Ab nihil neque debitis quam labore aperiam. Error nam voluptatum laudantium incidunt ullam nihil quia. Saepe corporis reprehenderit. Quas suscipit consequatur eveniet doloremque officia. Cum occaecati pariatur in. Qui facere nam veniam aperiam natus maiores. Nobis alias nemo velit placeat vitae voluptatem omnis. Nulla nihil quasi corrupti labore aliquam.

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