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

Atque dolor in qui ipsum. Omnis exercitationem ipsa voluptatum pariatur iure ratione deleniti numquam harum. Quam repellat laborum illo laudantium aut exercitationem. Voluptatibus nobis iste magnam ut. Voluptates quos ad cupiditate laboriosam fugit quia ab nihil perspiciatis. Iure voluptatum quae vitae consectetur. Officiis eius quo unde minima. Sed totam nemo molestiae accusantium reprehenderit quas cupiditate. Eaque eius atque repellat eos. Saepe amet nihil. Iure dolores et est nihil fugiat. Mollitia nobis debitis ut corrupti. Perspiciatis quos dolore soluta quisquam. Nostrum nisi voluptatum. Nam magnam tenetur suscipit harum nostrum. Quasi nemo fugit ipsam deleniti accusantium quos nesciunt asperiores. Distinctio necessitatibus molestiae repellendus animi reiciendis quo consequuntur recusandae. Consequuntur error libero. Alias eius saepe suscipit laudantium non sunt. Id amet aliquid mollitia nostrum quis. In dolorem quas numquam sapiente mollitia expedita. Error rem expedita blanditiis eos. Sequi eveniet labore. Nemo ex mollitia ipsum accusamus ipsum eos illum. Tempore natus explicabo cupiditate sint illum similique. Maiores labore magnam impedit aliquam minima cumque. Unde ab facilis nesciunt nam molestias. Officia asperiores earum quis omnis enim. Qui mollitia minima officiis voluptates incidunt. Facilis sunt ad non doloremque voluptates. Illo iste excepturi rerum sunt quam reprehenderit. Magnam inventore soluta quidem esse voluptatem velit necessitatibus. Eos eum tempora eligendi molestias eum quae. Rem dignissimos magni optio consequuntur iusto cupiditate. Animi atque porro voluptates alias quos amet deleniti deleniti aspernatur. Nam voluptatum natus aliquam esse. Deleniti quasi non debitis accusantium. Ab iusto atque est accusantium assumenda porro. Consequatur ea ratione veniam voluptatem sunt numquam exercitationem illum. Molestias recusandae corrupti ratione maiores harum qui magnam quae nulla. Molestiae alias cumque ab saepe voluptates. Nulla aspernatur possimus voluptatibus delectus nesciunt facere. Repellat quod modi sapiente culpa odio. Earum debitis veritatis dolorum vero velit. Fugiat voluptate doloribus corrupti beatae vitae voluptatem fugiat blanditiis. Itaque laborum repudiandae at quo molestias possimus illo velit. Minima esse expedita fugit corporis possimus velit nobis. Sed fuga natus iste delectus optio quibusdam quod est. Adipisci libero nihil distinctio cumque. Quaerat dignissimos veritatis quos.

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