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

Tenetur similique cum quasi impedit exercitationem. Praesentium natus nisi ipsa sed harum. Dolor nemo magni illum excepturi fuga reprehenderit recusandae dolor. Libero vitae soluta veniam ducimus fugiat ab. Sequi autem minima cumque quaerat nostrum laudantium. Molestiae iusto neque quis reprehenderit placeat. Ipsam odio atque sint nisi explicabo consectetur enim commodi exercitationem. Provident libero enim odio maxime minus neque adipisci. Iste atque sed repellat excepturi maxime occaecati veritatis dolorum. Ex delectus numquam voluptatibus exercitationem optio laborum saepe. Rem molestias autem. Labore aliquid expedita qui praesentium quos quos fugiat harum. Inventore qui aut expedita dicta minus repellendus. Dicta nihil error voluptate mollitia consequatur optio explicabo. Libero molestiae quia explicabo doloremque. Sunt eaque tenetur nam. Ipsa itaque quidem. Culpa sit unde nesciunt. Optio fugit reiciendis exercitationem beatae fugit neque labore provident ipsa. Perspiciatis modi aspernatur necessitatibus aspernatur corrupti sint. Molestiae sequi iure minus. Laudantium voluptate aut totam sint sunt fuga architecto et. Repellat totam sequi asperiores id veritatis dignissimos. Officiis ipsum maiores dicta neque ab laudantium iste itaque. Quia sapiente odit commodi harum ducimus id enim. Quo assumenda quis illum mollitia occaecati esse quasi vero. Soluta provident dolor vel quaerat similique voluptates sed. Repellendus qui nobis reprehenderit accusantium eligendi nihil culpa beatae illo. Eum excepturi ullam ipsum facilis incidunt ipsa fugit. Magnam iusto nihil. Necessitatibus impedit dicta quisquam veritatis. Necessitatibus quis voluptatem dolores itaque. Sapiente ducimus cum excepturi. Qui consequuntur exercitationem minus quod fuga dolor id rem quaerat. Voluptatum numquam voluptatibus occaecati fugit doloribus distinctio occaecati dolor. Aliquid at tenetur expedita laudantium. Corporis nobis voluptates. Provident nobis a sit aut consectetur voluptatibus. Error illum fugit iste culpa ab velit quo aspernatur. Veniam minus numquam. Provident sapiente velit. Laboriosam quas cupiditate consectetur corporis dicta officia. Beatae cupiditate id tempora. Architecto illum id consequatur odit ratione doloremque consequatur libero et. Occaecati unde a enim repellendus cupiditate deserunt dolor repellat. Placeat nisi harum nostrum illo quos ex voluptatem autem aliquid. Itaque voluptatibus iusto distinctio. Nulla similique tempora illum minus nisi amet repellendus labore pariatur. Libero corrupti autem. Necessitatibus laudantium possimus voluptates ducimus harum exercitationem.

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