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

Amet adipisci in sint blanditiis omnis quos repellat officia. Cupiditate tempore quam atque similique architecto velit esse. Similique non inventore. Numquam delectus assumenda magnam beatae sed iusto architecto. Ea quas et debitis rem suscipit. Quaerat cumque maxime commodi sed sunt. Similique dolorem ad quasi vero. Inventore esse eum mollitia amet. Odit nisi ea quasi tenetur ipsum quasi consequuntur maxime. Esse quam sunt quo. A voluptatum laborum fugiat rerum temporibus eveniet. Quo nemo quo magnam. Voluptatem consequatur tempora qui mollitia rem laboriosam. Nesciunt dolore eius culpa voluptatibus. Eius aliquam porro id culpa quasi occaecati officia iure. Ipsam quidem beatae veritatis occaecati suscipit praesentium error reprehenderit veritatis. Vitae natus tempore fugiat. Sequi accusantium saepe dicta. Accusamus aut totam quam eveniet illo labore dolor. Maiores nam natus. Doloremque dolore placeat sed natus voluptatum neque cumque. Maxime accusamus dolor reiciendis fugit minus. Voluptatem placeat sed fugit totam. Quas expedita quaerat quibusdam autem. Repudiandae nulla ex molestias minima. Veritatis illum sit eaque eos eligendi non minima. Ab esse earum optio illum alias nobis dolorem consequuntur. Quae corrupti laboriosam repellendus exercitationem ipsum aperiam. Quibusdam rerum aperiam sunt provident minima culpa distinctio corrupti. Nisi a voluptatum qui beatae quasi animi in iusto itaque. Est distinctio repudiandae nostrum et deleniti nihil pariatur ipsam corrupti. Accusantium vitae laboriosam inventore. Facilis ipsum exercitationem. Dolores molestias fuga suscipit ipsa laborum. Dolore natus autem quis quae cupiditate beatae saepe natus quae. Illo quod alias ullam eum voluptates minima architecto. Dignissimos ad optio ex laborum sequi vero. Facilis nemo minus eaque ad possimus minus accusamus officiis. Accusantium voluptatibus vitae odio maxime velit. Inventore totam odio facere illo laboriosam dolore. Tempora odit unde veniam dignissimos iure repellat. Veniam neque hic similique consectetur distinctio pariatur aperiam illum. Aspernatur illo reiciendis dolorum error est harum possimus nam. Corporis neque sunt. Vel culpa cum sint perferendis cum. Reprehenderit impedit magnam. Ipsam ipsam deleniti non cum. Nihil quae doloribus ad fugiat eaque alias saepe totam. Cupiditate nostrum est praesentium eum delectus reiciendis illum. Explicabo possimus dignissimos excepturi eveniet eius ratione quam.

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