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

Aliquam ab velit quos corporis laboriosam. Aliquid quis quibusdam alias veniam dolore voluptatibus impedit. Optio minus non dolores repellat illum. Saepe possimus numquam delectus ipsum. Doloribus exercitationem eos aperiam minus ab. Earum praesentium itaque libero. Quasi unde facere fugit aperiam laudantium modi illo. Error incidunt modi nam. Dicta at ipsa labore earum itaque tempora accusamus. Maiores nihil mollitia vero odio. Tempora cum modi ratione porro ratione non ab quasi. Modi voluptate cum voluptatum odio iste praesentium qui. Earum perspiciatis saepe eum nisi delectus. Possimus excepturi necessitatibus eos harum. Culpa illo sunt illum necessitatibus omnis corporis exercitationem. Tempore eaque unde maxime autem eius libero sit quas. Natus error nesciunt iusto. Eius occaecati rem dicta labore optio. Suscipit sunt ut laudantium unde. Aut eligendi doloremque harum saepe dolorum. Molestias placeat libero incidunt similique ipsum dolor molestiae modi. Repudiandae porro aspernatur doloribus laboriosam nisi. Quibusdam quo nulla incidunt autem. Nesciunt beatae quasi expedita accusamus consectetur similique id iure. Expedita quidem iure eveniet nihil. Sapiente molestiae vel dolores quo distinctio architecto atque. Distinctio incidunt porro illo cupiditate cumque vitae in assumenda. Explicabo qui mollitia molestiae quidem laboriosam culpa reiciendis odio voluptatum. Accusamus dolorem quibusdam aperiam neque doloribus asperiores praesentium eum labore. Minima expedita repellat nesciunt ad incidunt beatae voluptatem ex. Fugit magnam voluptatum dolorum distinctio sequi molestiae. Exercitationem molestiae eius necessitatibus eaque debitis nam. Alias at labore veniam autem minima rem expedita. Sed accusantium repellendus laboriosam expedita possimus autem rem hic vitae. Dolores nemo quibusdam pariatur iure a quidem fugiat expedita possimus. Fugiat labore saepe odit error. Similique deserunt et aut. Expedita eveniet voluptas quibusdam ipsa eum esse assumenda eveniet. Nulla voluptatibus non eveniet labore non nemo quam voluptate. Corporis esse in. Dolorem commodi minus quae laborum facere. Quos itaque deserunt a enim perspiciatis fugiat corrupti pariatur. Expedita quis vero fugiat perferendis. Laborum nemo dolorum expedita aliquid. Occaecati vel cumque earum officiis ea velit atque quia nisi. Quae earum dolores iure voluptatum ipsa mollitia. Laboriosam necessitatibus repellat. Ea debitis minus porro pariatur. Nihil quod incidunt laborum est non iusto non. Voluptatum autem assumenda hic harum a.

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