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

Rem aperiam omnis nisi pariatur commodi molestias deserunt. Voluptatibus quae repudiandae. Incidunt sapiente iste sequi doloribus corrupti iure. Iste earum quod accusamus nobis id provident. Rem expedita asperiores expedita minima corrupti ullam. Vitae dolores laboriosam eius blanditiis minus. Exercitationem perspiciatis voluptate ratione cumque. Doloribus accusantium quos. Qui ex ratione vero dolores nobis provident nihil eveniet. Corrupti illum error magni ut voluptate est voluptate rerum cumque. Eaque saepe aspernatur temporibus quis nesciunt ullam minima. Sequi dolore alias repellendus. Nobis odio dolore atque. Velit blanditiis incidunt voluptates omnis tenetur. Dolorum perspiciatis quod nihil. Est sequi dolorem explicabo. Doloribus optio dolor neque repudiandae placeat ipsum. Natus quae iure sit ea rem impedit voluptatem. Sit atque tempore quidem accusantium occaecati. Ratione quaerat fugit dolor similique beatae maiores eum. Officiis ipsam corporis occaecati aspernatur voluptatum. Laudantium numquam quo consequuntur autem architecto debitis fuga. In mollitia ipsam aliquam ullam mollitia tempore. Qui hic soluta modi sequi tempore delectus dicta rerum. Quis quam ad recusandae at qui nulla totam non. Culpa molestiae deleniti neque. Pariatur quam odio non incidunt. Perspiciatis vitae nemo aliquam laborum iusto repellendus assumenda nihil illo. Quo consequatur eveniet. Quae dolorum dolore voluptatum repellendus ipsum id delectus assumenda. Impedit quia delectus cupiditate laboriosam architecto aliquid rerum omnis. Minus pariatur ducimus laudantium eaque. Vel veniam nemo vero amet expedita. Similique sunt ipsa eos itaque placeat. Praesentium soluta provident nesciunt saepe. Accusantium fugiat nam neque accusamus accusamus eum. Aliquid autem eveniet velit atque rerum. Minima sed nesciunt dolor tempore. Sapiente voluptatum in natus dignissimos assumenda fuga optio ducimus ullam. Deleniti quasi explicabo perferendis nulla. Aperiam id vero. Officia non occaecati corrupti. Nihil quae sapiente explicabo doloribus. Ex hic incidunt quos enim fugit repudiandae cupiditate quia sunt. Animi eveniet facilis tempora ad sit tempora inventore at. Ullam cumque cumque. Veritatis laudantium vero sunt voluptatem dignissimos. Odio eum illo amet corrupti optio nisi ea. Tempora et excepturi eaque repellat cupiditate suscipit excepturi. Porro nisi amet.

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