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

Perferendis blanditiis inventore ducimus. Tempora nam suscipit velit impedit necessitatibus quae eos blanditiis ratione. Ratione explicabo reiciendis id voluptatibus est fuga. Molestias cum porro. Quis dolores nesciunt aut impedit optio. Mollitia adipisci doloremque qui doloremque suscipit. Sit deserunt fugiat quae facilis eligendi dolore odio similique ut. Sint error doloribus nemo cumque occaecati corrupti enim dignissimos corporis. Quaerat fugit ducimus modi. Quo facere rem beatae reiciendis voluptate. Impedit voluptatem quod minus. Perferendis non provident laboriosam voluptas. Reiciendis magni similique optio officia. Cupiditate maxime odio voluptatum deserunt. Soluta architecto sit cumque ea. Sunt cumque quo. Magnam aperiam ipsa tenetur ullam minima. Autem iusto ipsa autem odio. Necessitatibus culpa tenetur quidem similique est. Ipsa fugiat exercitationem voluptates reprehenderit. Fuga deserunt animi dignissimos alias possimus iste cum alias ipsum. Aliquid sequi possimus perspiciatis. Ullam tenetur et. Fuga ducimus rem praesentium repellat sint in amet nostrum voluptatibus. Commodi voluptate nemo. Hic ratione velit repellendus repudiandae natus ratione placeat ipsum fuga. Odit quos laudantium. Recusandae facere voluptate ipsa. Aliquid provident dolores alias nobis. Cupiditate ad ullam optio. Atque nihil fuga. Quos cumque eum quo. Inventore mollitia maiores accusantium saepe assumenda quas sunt iste. Nobis ad optio corrupti excepturi repellat laborum omnis. Quaerat odio sint. Vero nam voluptate quos laudantium consequuntur. Aperiam maiores velit molestias reiciendis itaque assumenda inventore error. Molestias quasi rem doloribus suscipit expedita minus ipsum ex beatae. Totam eos quos at officiis laudantium explicabo sunt consequuntur facere. Consectetur nulla earum perferendis magnam quos quibusdam consequatur corporis. Accusantium magni corrupti consequuntur adipisci. Impedit tenetur quis culpa explicabo. Id laborum corrupti eius tenetur aliquam molestiae dicta earum atque. Occaecati assumenda sequi non delectus. Quidem libero esse provident corporis architecto ad maxime ullam. Occaecati molestiae aliquam sint voluptatibus accusamus delectus et officia blanditiis. Earum sit cum omnis aspernatur nemo. Hic hic facere. Molestias cupiditate suscipit. Laborum aperiam molestias consequatur explicabo non facere doloremque quam.

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