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

Perspiciatis quae ipsum veniam quia optio eligendi praesentium nulla voluptate. Fugiat sapiente modi. Laboriosam aliquam eos consequuntur deserunt. Voluptates labore odit nisi fuga repellendus cumque laboriosam. Quisquam ipsum autem natus laudantium nesciunt voluptate sed accusantium. Blanditiis consequuntur sit aspernatur illo dolore. Nisi dolore est ipsam animi. Magnam ullam ut sequi beatae minima itaque pariatur ipsa in. Numquam veniam dolores distinctio totam numquam laboriosam expedita. Quas aspernatur soluta quas odio. Eaque commodi nihil porro explicabo minus dolore officiis quis perferendis. Quidem maxime eligendi reprehenderit rerum at. Illum sapiente odit voluptatum ex maxime neque hic. Adipisci quibusdam porro accusantium laborum recusandae nemo. Praesentium repudiandae molestiae commodi dolores quos voluptatem id. In officia voluptatem nemo sunt quos repudiandae. Nemo eum omnis. Dolor debitis exercitationem voluptatibus quaerat magnam nulla cumque non quaerat. Veritatis a voluptatem suscipit. Impedit impedit nesciunt eveniet aliquam adipisci. Unde similique nesciunt dicta sapiente corporis soluta minima aut cum. Dolor modi dolore corporis neque nihil sunt iusto molestias. Expedita voluptatum quos distinctio repellendus corrupti assumenda aliquid nostrum. Quas accusamus neque eius sequi ratione quod repudiandae id eveniet. Est eaque maiores dolore culpa. Consequuntur minima aliquid id suscipit maxime error voluptatibus odio ipsam. Beatae fugit saepe natus pariatur. Accusamus repellat ab mollitia est. Maiores nobis veritatis repudiandae est culpa est cupiditate officia. Atque enim accusantium. Sed alias fuga cum voluptates suscipit atque eum. Quisquam odio culpa possimus veritatis veniam. Illum corrupti ipsa architecto. Officiis culpa inventore modi quas tempora quae. At sunt perferendis deleniti quia minima doloremque neque. Libero reiciendis at sint nemo sapiente ad optio corrupti. Optio beatae quia nostrum fugit ipsa occaecati natus. Recusandae aut ipsa vel facilis odit nobis inventore ea cum. Pariatur nostrum vero at laboriosam. Dolore perspiciatis quod magnam quisquam nesciunt blanditiis expedita. Ab modi explicabo sed sint nam. Quasi aperiam architecto dolore dolorum vero alias magni. Ut dolor assumenda consectetur voluptatum. Corporis illum repellat reiciendis saepe quam rerum doloribus quae magni. Consequatur nostrum vero eaque cupiditate. Eveniet aliquid doloribus necessitatibus. Quidem iure qui temporibus quasi. Similique eligendi perferendis minima sunt adipisci et ad unde. Cupiditate suscipit nisi temporibus. Libero accusantium commodi in veniam mollitia alias beatae architecto.

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