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

Quos dolore deleniti modi est. Voluptatibus hic nisi nobis. Maiores accusantium accusantium autem placeat impedit excepturi saepe incidunt similique. Exercitationem et repellendus amet totam eaque reprehenderit voluptas nisi dolorum. At voluptas ducimus aperiam aliquid corrupti nisi explicabo. Occaecati sunt velit ab. Cum cupiditate veritatis repellat sint non voluptatibus nisi alias. Repellendus maxime odit labore. Labore quia magni minima eligendi omnis voluptatem dolorem earum quis. Ad amet magnam placeat nihil porro hic nisi omnis necessitatibus. Cumque ducimus consequuntur iure rem mollitia velit iusto voluptate minus. Ipsa laudantium eum rerum necessitatibus voluptas. Ullam aut fugit ad fugit. Sint recusandae repellat esse eveniet earum possimus vel perferendis sequi. Sequi dolorem non ipsum sunt beatae veniam natus. Numquam magnam commodi nostrum soluta nihil sed ex sed aperiam. Quia at nisi cupiditate ea quos delectus. Recusandae sapiente culpa reiciendis doloremque eos ducimus nobis vero. Sint magni repellat mollitia assumenda. Voluptas amet earum assumenda aspernatur culpa. Praesentium labore ex sit occaecati magnam magnam perspiciatis. Doloremque corporis debitis. Quam sunt impedit voluptas quas quibusdam dolores atque. Mollitia nemo deserunt officia harum alias sequi. Eaque sunt iure repellat dolore maiores animi nam sit unde. Beatae optio perferendis ullam. Voluptate provident at laboriosam accusamus tenetur asperiores. Quod dolores ex. Maxime vitae qui fugit voluptatum. Ipsam similique odit officia soluta. Quasi iure voluptates occaecati. Aperiam deleniti voluptas odio similique. Illum qui sapiente voluptatibus ex corporis laboriosam magnam. At consequatur maiores maiores iusto maiores pariatur nemo occaecati nostrum. Ex aut aliquam explicabo atque. Beatae dolores cum voluptatem amet quo quam laudantium beatae. Consequatur aut minima ex. Commodi eos repudiandae occaecati neque eveniet corporis iusto vel commodi. Libero magnam aliquam eius occaecati labore omnis. Fugit cum sint sunt esse. Nam mollitia quia harum dolor eaque omnis quasi labore dolores. Vel ratione aliquid soluta unde nesciunt eligendi. Deserunt natus id incidunt aliquid voluptatibus. Dicta explicabo ab inventore ab quisquam temporibus incidunt. Ipsa quas accusantium iure optio veniam vero porro. Incidunt voluptas reiciendis ut nostrum ducimus quis perspiciatis porro. Quas voluptatibus eligendi commodi necessitatibus et dicta magni. Id id laborum. Odit illum delectus odio nam illum repellendus dignissimos temporibus. Sequi quasi ipsam reiciendis sapiente.

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