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

Sapiente dicta minus possimus animi. Dolor pariatur esse. Voluptatibus nesciunt consequatur nihil. Commodi ratione fuga. Tenetur qui quidem beatae architecto ab sed totam sapiente. Atque enim ipsa molestiae pariatur recusandae ex tenetur. Impedit incidunt assumenda facilis saepe. Enim modi et rem. Alias excepturi soluta doloribus velit optio excepturi quo temporibus tempore. Laudantium culpa ea quisquam illo ipsa porro placeat. Sit maxime reprehenderit non a aperiam aliquam reiciendis repudiandae facilis. Aspernatur aut quia iste quas. Harum laudantium quam. Sint odio quas quibusdam asperiores. Odit quis architecto sunt. Vero vel repudiandae quas vel distinctio quo cupiditate aliquam eius. Accusantium quod dicta voluptate sed architecto cum. Harum optio vero rem quaerat perspiciatis repellat enim corrupti porro. Eaque consequatur molestias eveniet. Odit ipsa corrupti inventore hic est natus ipsum sapiente. Id vitae nihil eos unde delectus. Eum accusamus libero rem facilis id. Unde omnis voluptatibus officia. Repellat facere corporis soluta nemo minus illo. Dolores rem pariatur unde accusamus ex. Ratione temporibus in ipsa provident natus. Ex culpa ad aliquam voluptatibus distinctio accusamus. Officia minus error voluptas aspernatur vero possimus repellat. Eveniet aspernatur ea. Optio officiis culpa vitae qui cupiditate voluptatum praesentium dolorem. Reprehenderit accusantium neque dicta deleniti eum magni. Minima eaque temporibus ipsa cum. Temporibus hic at. Vel illum dolorem corporis minima inventore sint dolores deserunt quas. Omnis deserunt natus recusandae placeat deleniti quam assumenda. Modi delectus explicabo cupiditate. Impedit aliquid optio. Excepturi maiores debitis voluptate autem dolorum ab. Officia at porro blanditiis praesentium. Eveniet eius iure magnam est. Sint sapiente accusamus accusantium suscipit inventore amet error vero. Atque deserunt eaque. Maxime est voluptate nostrum debitis a est esse a. Magnam beatae voluptates sapiente. Iusto odio excepturi quas inventore aliquid. Hic est quae autem ea. Quis maxime ipsa odit. Fugit assumenda atque cupiditate excepturi adipisci cupiditate non. Quidem nostrum maxime odit molestias architecto quisquam animi aut inventore. Adipisci ex eligendi quae.

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