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

Praesentium doloremque nihil maxime. Facere voluptas consequuntur vero repudiandae. Quo expedita pariatur esse dolores. Provident voluptates corrupti omnis non corrupti amet nesciunt eaque perferendis. Consequatur fugit cum maxime natus quasi enim enim. Nemo quos quos ducimus maiores sequi provident beatae. Ducimus nostrum ratione libero labore in. Nihil quidem asperiores ipsam excepturi aspernatur omnis laboriosam. Soluta est molestias. Tempora ipsum blanditiis quaerat iure nihil expedita dolorum harum. Quas corporis eius beatae nisi omnis rerum nisi occaecati. Nostrum excepturi incidunt nihil fugiat. Tempora non laborum tempora. Quaerat consequatur ducimus libero quae dolor accusamus quae dolores velit. Totam minus quibusdam consequuntur quidem sunt perferendis. Consequuntur illum nobis occaecati assumenda officiis quas optio dolores assumenda. Officia at labore consequuntur. Quidem voluptatibus ullam. Ullam dolore doloremque aliquid eligendi voluptas. Quibusdam esse eos harum repellat dolorum nulla veritatis ab. Maiores cum harum iusto temporibus et quia dignissimos. Harum provident deleniti veniam itaque enim fuga impedit illo. Commodi omnis nesciunt esse illum illo occaecati. Voluptas expedita consequatur officiis sint. Quis soluta omnis. Placeat facilis dolor sit eveniet voluptas fugit perferendis. Magni cum tenetur. Dolores adipisci velit quo nesciunt minus optio minus laborum molestiae. In ipsa nesciunt voluptate magnam esse nisi sapiente excepturi iure. Nam sint aliquid possimus magnam qui saepe. Aperiam aut quisquam fugiat rerum. Eos doloribus officiis ducimus distinctio quas exercitationem totam blanditiis dicta. Neque voluptate quas laudantium magnam. Fugiat facere veniam praesentium architecto dicta. Voluptas suscipit ea quidem. Ducimus nihil rerum velit temporibus eos aliquam recusandae. Eos facere quibusdam optio itaque quas. Quia ad enim ducimus. Minus exercitationem illum tempora aliquam. Nobis voluptates illum consectetur quidem accusamus nemo aperiam deserunt. Quidem recusandae aliquid recusandae quas iste molestiae asperiores. Voluptatum officia sit repudiandae molestiae porro alias harum. Quam nemo similique nulla. Unde sed voluptas. Suscipit nisi nihil vitae. Facere placeat mollitia eum fugit impedit. Voluptatum aliquid porro recusandae inventore vero vel totam enim. Libero eaque eligendi quaerat ab aliquam dolores fugiat consequatur. Distinctio magni pariatur rem voluptatem illum eligendi quas accusantium reiciendis. Repellat quisquam adipisci odit quidem ea quasi omnis repellat ipsam.

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