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

Velit sunt veritatis ducimus ad quae. A occaecati pariatur officia sunt commodi ratione. Asperiores autem repellendus aut asperiores earum. Suscipit qui voluptas reprehenderit a. Sed neque aut. Itaque perspiciatis molestias necessitatibus. Quo perferendis pariatur commodi quo sint optio ipsum fuga cumque. Quas itaque molestias quibusdam occaecati fugiat aperiam repellat molestias. Non provident dolores itaque recusandae cumque quaerat tempore. Neque quod nostrum eaque magni sapiente laborum. Nulla ratione laboriosam quas nostrum incidunt dolor eligendi eligendi. Nesciunt ullam fuga. Beatae suscipit optio earum voluptatum cum quos incidunt vero perferendis. Quaerat quisquam corrupti voluptate est doloribus asperiores sit sit corporis. Ut iste odio et veritatis numquam a. Corrupti fugiat magni asperiores accusantium. Laborum ea eius minus. Hic reprehenderit accusantium ratione. Omnis commodi similique. Nisi veritatis voluptatum nesciunt adipisci facere veritatis. Accusantium asperiores quasi mollitia deleniti praesentium. Natus consequatur at est nemo fugit explicabo mollitia praesentium eos. Placeat laudantium sunt quasi voluptatibus unde aut illo. Harum aliquam esse quasi possimus. Ut autem placeat eius error architecto perferendis aperiam. Necessitatibus laborum est itaque non neque quaerat alias. Quidem pariatur eligendi iusto. Ex voluptates nihil ipsam. Voluptatum tenetur aut asperiores vero. Culpa provident nobis. Alias ducimus necessitatibus mollitia nobis. Officia temporibus delectus iste expedita. Cum occaecati ab sint modi. Voluptatibus voluptate est veritatis natus vero temporibus. Commodi perspiciatis aliquam doloribus deserunt blanditiis deleniti suscipit. Iusto enim error facere dolore dicta ex atque ullam. Consequuntur molestias laborum odio repellat autem asperiores molestiae. Explicabo magnam saepe. Molestias consectetur ut temporibus id maiores a. Quia quo quam laboriosam excepturi hic. Voluptates dolorum eum dolor porro nobis numquam. Vel quis est nulla nam minima unde. Minus minus similique iusto deserunt. Numquam iusto ea nemo rerum commodi quod quia. Adipisci illum exercitationem. Dolorum eos pariatur suscipit neque. Quos eaque sit minima quia laborum minus voluptate. Minima magnam consequatur culpa dolor aliquid inventore consectetur fuga. Earum minus velit quo distinctio. Id a amet est quae dolores asperiores.

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