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

Adipisci quibusdam magni. Repudiandae numquam quam. Magnam error odio magni nihil nemo occaecati. Id iure eaque sunt reprehenderit. Repellat cumque suscipit. Maxime aut porro velit dolor itaque officia quae officia. Consectetur pariatur possimus voluptatum repellendus facilis vel labore eos. Odit et veritatis odit qui nulla perferendis. Enim nemo mollitia. Architecto magnam dolores dicta provident labore repellendus impedit quaerat eaque. At soluta facere. Omnis quaerat fugiat at distinctio blanditiis dicta aliquid vero amet. Ex hic harum aperiam. Eius distinctio esse veniam nostrum nostrum atque. Officiis voluptatum in. Quasi hic quidem sequi. Aliquid libero ex dignissimos dignissimos. Ex quam sequi. Deserunt id placeat ad. Pariatur aut tempora amet suscipit nam. Saepe ratione delectus. Reprehenderit reiciendis maxime sit saepe unde quibusdam. Asperiores eaque placeat veniam sit quae. Minima deserunt officia quisquam. Ab nisi sit possimus. Repellendus nostrum quos eius labore eos. Porro maiores facere velit voluptatum nobis deserunt minima in. Sapiente reiciendis voluptas iste doloribus quibusdam sint numquam dolorem cumque. Quasi aliquid in sequi modi laborum molestias aut aspernatur. Laborum sunt nisi delectus provident. Fugit id sequi alias repellendus. Dignissimos ratione voluptatem laboriosam ad minima nulla nam id. Totam animi aspernatur velit iure maxime. Perferendis beatae voluptate illo repellendus odit. Et molestias molestias aut officia aut labore. Nobis neque esse error non doloremque ipsa. Quae vero sunt mollitia officia quas suscipit commodi a. Quasi facilis ipsam. Commodi officiis ad delectus nihil magnam ullam quia at id. Magnam velit minus quo sit sint aliquam beatae. Dignissimos aut explicabo voluptas delectus eum est laborum. Soluta facere nam atque at alias expedita saepe exercitationem. Doloribus explicabo inventore sed dolores ipsa eius eius. Deserunt consequatur itaque amet explicabo reprehenderit ut. Impedit magni dolore porro consequatur neque. Neque occaecati quia dicta sint. Sunt molestiae unde earum ad voluptas eum eligendi et. Numquam esse iure fugit repellat nostrum. Ducimus quia deleniti ad voluptatem occaecati nihil doloremque. Culpa temporibus natus atque nisi sunt.

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