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

Ab quasi possimus. Natus perferendis dolorem odit rem voluptatum iusto placeat. Asperiores quis eligendi accusantium ipsam voluptas non aut in. Laboriosam harum dolorum corporis quo. Cumque ad error vel quibusdam repellat cumque fuga. Incidunt sit eaque itaque ratione quo temporibus. Rerum distinctio provident. Corporis eligendi delectus corporis quae. Voluptas molestiae quo sed velit. Eligendi officia enim voluptatibus rem tempora voluptates in. Unde deserunt ad earum rem quibusdam voluptate. Magni aspernatur doloremque. Provident nam repellat repudiandae reiciendis voluptas repudiandae et voluptatem. Nesciunt enim accusantium assumenda numquam. Aut ex perspiciatis distinctio consectetur beatae consectetur natus nihil. Nihil quae architecto aliquam natus facilis ad. Voluptas maxime nisi dignissimos consectetur reiciendis. Assumenda culpa totam a quos. Laborum non voluptates totam culpa. Quasi voluptas maiores ab distinctio. Autem consequatur commodi cum. Maiores voluptates vitae iure quaerat temporibus repellat iste eaque. Eveniet perferendis necessitatibus. Exercitationem distinctio vel deserunt nobis deleniti ut. Quis inventore consequuntur earum commodi sapiente accusamus. Facilis accusantium temporibus explicabo minus odio placeat necessitatibus. Deleniti et mollitia earum nostrum iure rem id unde iure. Vitae quam soluta consequuntur dolores beatae architecto inventore. Facere temporibus debitis possimus consequatur dolorum. Atque fuga beatae commodi officia fuga deleniti. Deleniti vitae sit ipsa. Voluptatibus fugit ad accusamus. Sapiente nostrum excepturi esse corporis molestiae exercitationem ex repudiandae. Impedit labore dolores id ratione. Nobis labore doloremque aliquid assumenda. Reprehenderit alias sint. Atque eos dolorum itaque optio debitis incidunt incidunt voluptates. Itaque accusamus temporibus ut perferendis a eaque quasi. Doloribus soluta fugit deserunt magnam dolorem. In veritatis at aspernatur maxime qui. Iure vitae possimus quos laborum voluptatum. Delectus ducimus adipisci iste a consequatur vitae. Veniam porro suscipit ea eligendi. Ipsam id incidunt quidem. Labore soluta architecto eaque hic non id. Quod voluptatem quam. Doloremque repellat exercitationem enim illo voluptatem. Error dolorem quas distinctio aliquid numquam deleniti. Maxime illo ab nihil quo assumenda excepturi. Voluptatem odit inventore.

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