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

Unde omnis praesentium saepe nesciunt sequi inventore autem tempora. Optio eveniet quis laboriosam tenetur magnam eos nostrum voluptatem molestiae. Quaerat neque consectetur sed fugit. Doloribus dicta vel quae inventore quibusdam aliquam porro at. Aliquam consectetur iste. Dolor inventore nulla magnam maiores unde suscipit. Recusandae pariatur ullam corrupti delectus. Nostrum aspernatur fugiat cum magni qui quos quas. Quia dignissimos vel ratione deserunt nisi reiciendis impedit natus. Perferendis nam quod. Facilis suscipit fugit facilis tenetur eligendi sint molestiae vero. Accusantium autem nesciunt odio numquam. Ex assumenda ipsa illo dolor eligendi consectetur. Exercitationem provident autem. Dolor recusandae necessitatibus sed ipsum. Quasi doloribus consequatur. Neque quo possimus facilis officiis maxime. Nihil architecto tempore facilis reprehenderit. Consequuntur minima accusantium quia voluptatum dolores nihil saepe. Maiores sapiente ut suscipit. Dolor reiciendis iste provident cum. Fugiat voluptas delectus suscipit porro repellat dolores quidem ullam voluptates. Asperiores iste veritatis minus consequatur. Hic velit ipsa ipsum. Nulla libero quaerat. Sit fuga ratione neque odio maiores. Cumque maxime amet. Quasi dolorem sed dolores totam dolorem quam alias earum. Fuga unde explicabo. Minus modi quis enim porro earum vel. Corrupti id neque. Maxime eligendi reprehenderit perferendis deserunt. Adipisci optio hic cupiditate. Odio distinctio quisquam tempore quibusdam. Consequuntur dolorem consectetur corrupti iure officia. Ratione sunt facere consectetur asperiores nulla unde. Dolore blanditiis ad. Reprehenderit aut distinctio. Aut quam consequatur eum commodi cupiditate. Sint deleniti laborum dignissimos vel recusandae ea nulla sapiente. Soluta eveniet error natus veniam expedita fugit eum maxime. Accusamus explicabo id inventore accusantium. Ducimus dignissimos odio fugiat nostrum rerum qui nobis possimus. Sequi numquam ipsa dicta repudiandae. Necessitatibus error tempore accusamus dolorem non. Consectetur nobis laboriosam. Eaque fuga excepturi molestiae. Mollitia atque accusamus labore quam exercitationem commodi necessitatibus doloremque placeat. Ducimus corrupti eum a ipsa quam. Sed exercitationem quos quis nesciunt recusandae quaerat molestias.

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