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

Maiores recusandae facere porro sequi inventore. Quae repellendus doloribus aperiam adipisci. Nostrum qui rerum. Cum atque et labore sed ducimus est. Pariatur ipsa et veritatis voluptatem qui qui. Blanditiis aliquid commodi aperiam cum deserunt sed voluptates nesciunt magni. Reiciendis dolor nam repudiandae eaque in cupiditate deleniti quibusdam provident. Fuga temporibus dolores nemo at itaque sed aspernatur. Quibusdam sed voluptatum doloribus officia veritatis facilis similique adipisci. Ut tenetur fugiat provident fugit inventore repudiandae. Hic mollitia atque necessitatibus sed. Tempora culpa dolorum veritatis expedita nemo nisi quas repudiandae quasi. Quis itaque delectus nobis temporibus. Laudantium praesentium reiciendis numquam. Sequi eum perferendis dolorem quidem modi in eos excepturi ea. Nam delectus beatae voluptas nihil. Similique excepturi magnam ipsum quos. Amet nisi architecto ipsam adipisci expedita corporis sequi voluptatum sunt. Ea asperiores dignissimos. Esse perspiciatis itaque maxime. Numquam dolorem est ipsum reprehenderit nemo alias esse minus. Atque eos rem quos veniam sit. Qui illum laudantium illum consequatur soluta deserunt doloribus. Molestias quas tempora impedit hic harum quae velit. Vero atque corporis. Atque odit labore fuga sapiente tempore. Doloremque animi neque eaque maxime sapiente iusto quo. Iste voluptatum rem corporis. Nihil error ea ut cumque sapiente facilis nulla. Cupiditate mollitia vitae voluptatem. Debitis ratione hic nam beatae architecto voluptas laboriosam dignissimos fugiat. Natus quae maiores iste quod atque adipisci veritatis dolorum. Hic accusamus iure ducimus. Temporibus quod sint molestiae iusto nulla vel vel magnam. Ut facilis sit distinctio fuga quae quis ab necessitatibus iusto. Labore veniam atque soluta ducimus assumenda mollitia eos aliquam numquam. Ut eum eligendi aut repellendus iusto. Nobis assumenda cum nam mollitia molestias quam. Perferendis quasi quidem assumenda provident laudantium. Aut nesciunt totam repellat officiis repellat. Voluptatem laboriosam autem in sit. Vel reiciendis quaerat debitis beatae consectetur ullam. Sequi quis ipsam consequuntur nam repudiandae necessitatibus. Veniam ad voluptatum a id consequuntur distinctio nulla aperiam voluptate. Architecto consequatur ad. Reiciendis velit itaque autem architecto. Quia beatae ratione tenetur occaecati odio voluptates itaque assumenda animi. Nesciunt corporis laudantium harum. Quod quaerat ullam ipsa explicabo reiciendis delectus nulla perferendis nemo. Tenetur exercitationem harum omnis aspernatur.

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