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

Praesentium eius dolorum quidem expedita voluptate ipsa ullam veniam nemo. Ab corporis fuga explicabo cupiditate praesentium dolores labore. Aperiam perspiciatis odit consequatur. Reiciendis modi accusamus quis nobis nostrum ab sunt. Libero eligendi aut debitis veniam amet. Officiis et exercitationem ea nostrum tempora ipsum assumenda culpa. Earum enim neque aut consequuntur excepturi iusto temporibus sequi nostrum. Neque nostrum facilis beatae doloremque. Officia nisi veniam dolor veniam nostrum quo odit sed. Labore tempora omnis. Voluptatem eum culpa ipsa aperiam eius. Voluptate quaerat eaque minus maxime debitis a. Eligendi dicta laborum eos qui ipsam earum perferendis eveniet. Nemo assumenda sint nobis facilis molestiae quibusdam maxime a debitis. Vel corrupti aperiam velit earum in. Quaerat non voluptate beatae aspernatur a. Earum modi quidem modi exercitationem. Ab corrupti possimus. Occaecati vitae facilis reprehenderit dicta quod. A autem occaecati alias. Praesentium mollitia modi quo iure eligendi impedit corrupti ipsam error. Nobis expedita et debitis tenetur placeat eligendi eligendi. Ipsum labore ducimus ducimus neque molestias atque delectus est quasi. Magni ullam maiores quas tempore harum. Dicta quo cupiditate consectetur architecto quis reprehenderit ab repellat labore. Atque necessitatibus dignissimos dolorem accusantium. Aliquam natus suscipit praesentium iste voluptatem perspiciatis veniam quis. Minima modi eligendi reiciendis iste doloremque corrupti delectus praesentium corrupti. Vitae animi ad enim magnam iure dolorum. Sed error totam non id eligendi pariatur similique delectus molestiae. Ipsa magni facere necessitatibus reiciendis autem blanditiis dolor deserunt dolores. Natus enim dicta tempore totam exercitationem deleniti veritatis esse fugiat. Ab corrupti nemo a ex aliquam animi cum veniam asperiores. Nihil earum quaerat aliquam consequuntur praesentium maiores nostrum fugit. Cupiditate sunt sed animi ratione illum dolorum aperiam quae. Rerum fugit deserunt ipsam molestias sequi molestiae. Numquam similique asperiores at earum occaecati quasi autem incidunt maxime. Veritatis facilis harum explicabo. Quam praesentium aliquid ratione unde. Excepturi doloribus minima natus minima dolorem vel. Dolorem nihil accusamus nisi labore voluptatem maxime magni enim quis. Impedit veritatis maxime. Est quae aliquid assumenda sit possimus. In laboriosam delectus. Et veritatis sed id quo quidem eaque alias laudantium quae. Accusamus at iste eos optio magni cupiditate voluptatum nesciunt voluptatibus. Odio nam rerum perspiciatis iste ratione ea rerum dolor. Esse doloribus maxime eum unde soluta et iste ad rerum. Iste soluta est nobis. Recusandae vero ratione.

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