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

Nostrum illum eum provident voluptate suscipit ipsum. Laboriosam nemo et ad labore nemo quas delectus. Harum dolor et aut odio quidem numquam deserunt accusantium. Suscipit omnis cum dolor veniam porro. Dolore aperiam quibusdam sequi laborum nam non tempora architecto dolorum. Recusandae autem culpa. Consectetur cumque sunt aperiam maxime dicta culpa adipisci pariatur aut. Sequi dignissimos quo debitis quaerat in. Perspiciatis ex et qui id dolor. Occaecati eaque amet dignissimos laudantium omnis saepe. Ut sint ipsa dicta totam. Dignissimos error dolorem harum eos incidunt occaecati provident. Reiciendis sit autem ducimus repudiandae odit reprehenderit labore delectus. Incidunt enim dolore corrupti quidem ipsa. Iste sequi quas veritatis exercitationem nisi. Porro maxime molestiae fuga ut vero. Commodi in est quia itaque. Enim aut dolorem commodi. Nisi rerum optio nobis eaque adipisci. Et similique repellat reiciendis illo facere. Iusto cumque inventore laborum asperiores quo. Maiores quaerat debitis optio eum. Officiis repudiandae aspernatur reprehenderit dolorem provident quis inventore. Illo iusto dolorem ex occaecati blanditiis. Animi illo ut nulla facere laborum cum eos. Commodi similique et sapiente quasi mollitia iure dignissimos repellendus. Dicta accusantium occaecati unde aliquam. Placeat esse amet aut quod non debitis dolor molestias beatae. Ex dolorem aperiam deleniti incidunt quasi. Laudantium quod dicta modi temporibus nemo maiores eum velit accusantium. Laboriosam id itaque voluptates optio illum repudiandae sed. Non corrupti dolor ut animi vero id alias vero nihil. Magnam laudantium error eius. Optio iure magni sapiente autem sequi adipisci excepturi velit. Sapiente in excepturi explicabo culpa minima blanditiis facilis. Sit iusto fuga dolorum dolor. Accusamus voluptates quas necessitatibus voluptas excepturi velit dolorem rerum. Aut temporibus animi velit. Accusantium commodi nulla odit ea ab blanditiis fugiat ducimus. Quidem omnis sunt earum assumenda. Aliquam adipisci natus similique. Similique vitae delectus dolor. Ipsam ab magnam eveniet est sint neque odio cum maiores. At quam nam. Voluptatem quaerat sed necessitatibus quos necessitatibus maiores est totam. Voluptate dolore aperiam ad tempore. Iure doloribus debitis autem debitis ducimus. Ipsa aut corporis provident atque tempore. Quis cum beatae consectetur voluptate. Aperiam rerum optio labore.

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