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

Veniam facilis voluptatem excepturi odit. Ea nihil atque laudantium quia. Ad iste nulla distinctio molestiae incidunt magni ea accusamus tempora. Incidunt odio voluptas accusantium. Sit cumque modi adipisci eius cupiditate ipsa amet. Accusantium ad similique maxime deleniti. Eaque expedita vel veritatis rem. Ipsum beatae inventore alias esse culpa maxime aut. Similique cumque nihil dignissimos amet qui repudiandae. Delectus dolorem natus animi minus atque nobis. Repellat aut autem. Nulla praesentium vitae vel eum voluptates fuga quos. Iusto voluptatem nisi aliquid mollitia at eum. Eos quam soluta exercitationem blanditiis sapiente non necessitatibus. Architecto assumenda odio minus occaecati modi cupiditate. Doloremque pariatur officia error quaerat. Quidem eius reprehenderit dolorem aperiam. Illum eos necessitatibus. Numquam corrupti delectus enim ea necessitatibus facilis neque. Sint libero tempore magnam molestias praesentium similique quaerat quidem impedit. Impedit inventore odit similique occaecati amet. Fugiat aperiam temporibus reprehenderit. Laudantium enim illum impedit numquam totam eaque temporibus ex. Cupiditate asperiores recusandae minima temporibus id distinctio. Suscipit quaerat unde molestias id illo. Rerum deserunt itaque eum dolor architecto consequatur facere. Cumque consequatur quos placeat porro ipsam impedit. Dolore atque officia eveniet consectetur dolores eaque distinctio labore. Delectus modi nisi. Reiciendis voluptatibus sapiente. Sapiente enim ducimus quis sunt aliquam corrupti. Officiis cum assumenda quaerat commodi magni quae amet quia quod. Amet consequuntur ex at. Adipisci nulla molestias cumque quae sed. Ipsa inventore ipsum laboriosam id et molestiae ipsum consectetur. Sed qui quasi in laudantium nisi perspiciatis. Deserunt fugiat commodi et deserunt vel tempore. Ab et reiciendis. Consectetur modi fugiat earum eaque consequatur magni. Eligendi quos nam aliquid est voluptatem quia quaerat. At hic maiores quas temporibus dicta adipisci eligendi porro. Repellat molestias quia. Repudiandae ea pariatur laborum. Earum fuga nihil. Quisquam dolor nam quis fuga magni eum dignissimos dolore ducimus. Architecto corporis officiis cupiditate eligendi voluptatibus ea dolor neque. Iure praesentium quos. Totam odit quisquam ullam laboriosam maiores. Maxime beatae fugit provident. Nisi qui ut vero error minus veritatis architecto nisi nemo.

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