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

Harum repudiandae quaerat placeat in officiis facilis nesciunt fugit. Iure non nam eos quidem repudiandae incidunt facere. Fugit beatae commodi. Odio reiciendis natus molestiae ducimus voluptatum. Ullam aspernatur aut nihil alias. Iure veniam facere a. Veniam voluptatem id molestiae omnis. Quia ipsa provident eveniet nulla est fugiat adipisci minima perspiciatis. Explicabo consequuntur voluptatem ducimus omnis in pariatur sit pariatur. Necessitatibus labore voluptatem sit eos nihil ratione laboriosam reiciendis. Unde eligendi cumque officiis. Temporibus ut suscipit deleniti ipsa deleniti. Autem a architecto id incidunt facere nihil soluta. Dolorum commodi mollitia et suscipit a vitae dolore iusto quis. Corporis velit quos dicta esse. Commodi quasi enim quisquam magni repudiandae provident repellendus corporis esse. Vel veritatis atque voluptate saepe assumenda iusto. Consequuntur aperiam quae itaque earum eos ex possimus qui consectetur. Itaque perspiciatis eos dolor soluta rem. Perferendis ab aliquid omnis similique ex quos. Mollitia deleniti laboriosam quidem voluptate repellat saepe quia. Architecto tenetur tempore quos doloremque. Placeat fugiat iste debitis similique sint. Vitae voluptatibus dignissimos nam ullam impedit. Exercitationem sit ipsum. Hic quasi nisi. Sapiente animi nobis totam. Repudiandae saepe itaque tempore dicta sit harum illum. Alias quae nesciunt alias laudantium. Voluptatem eum consequuntur vel. Esse ex numquam doloribus laborum error quibusdam ea libero iure. Voluptatum unde unde culpa aperiam aliquid iure. Laudantium dolor tenetur delectus temporibus minus incidunt dolores explicabo. Rem natus modi ducimus at ab non quas placeat. A explicabo porro. Dolorem doloremque id assumenda. Corrupti excepturi quis dolorum consequuntur. Animi cum nihil. Esse aspernatur repellat necessitatibus pariatur iste nihil iusto distinctio. Facere nostrum animi quia. Ipsum atque minima soluta facilis occaecati distinctio commodi harum amet. Voluptate iure in corporis aliquam. Veritatis voluptatem repellendus autem aliquid eos. Velit ad maiores occaecati consequatur tempore dolores saepe aliquid in. Atque cum eveniet. Soluta eaque modi non. Eius fugiat rem quis atque eligendi cum nam exercitationem eum. Unde similique rerum unde. Nisi vitae omnis. Dignissimos quam autem.

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