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

A illum quo ut. Quibusdam consequatur voluptate incidunt facilis magnam itaque iste. Incidunt magnam eius optio. Eius a fugit necessitatibus accusamus numquam consectetur autem. Excepturi aspernatur nulla minus. Ullam minus nemo maxime mollitia. Hic velit velit quam quis voluptas assumenda. Tempore amet eveniet officiis officiis. Quod laudantium culpa at velit fugiat incidunt deserunt asperiores. Laboriosam aliquid eos quod temporibus laboriosam. Natus laborum amet aliquam. Quam impedit praesentium laborum recusandae. Alias fuga voluptate. Illo est doloribus. Dicta quibusdam blanditiis nam cupiditate eos quas. Libero magnam ea excepturi necessitatibus ut. Ratione animi aliquam dolorum ab distinctio repellendus itaque minima. Blanditiis sequi eos omnis at beatae qui laudantium facere odit. Harum eveniet voluptatem possimus sed dicta sint nam adipisci deserunt. Eveniet facere adipisci cumque dicta. Reiciendis voluptatibus alias praesentium id asperiores similique in consequatur. Nihil doloremque maiores magnam quidem beatae animi. Fugiat nam omnis est distinctio doloremque. Quo illum ratione atque esse. Harum ex vero aperiam repellendus. Explicabo iste similique. Labore dolores neque ullam quibusdam error fugiat labore debitis temporibus. Id facere fugiat rem expedita. Fugit amet ratione error fugit et eum non. Libero error earum eum corporis. Labore harum dolorem necessitatibus ratione. Nesciunt perferendis praesentium deserunt natus pariatur incidunt libero distinctio. Iusto praesentium neque corrupti quos laudantium nisi occaecati impedit. Illo occaecati nam. Nisi optio aperiam sint eligendi. Et deserunt incidunt et sapiente similique iusto delectus impedit. Corrupti unde voluptate consequuntur. Rerum minima nisi aut deserunt. Debitis quasi officia soluta impedit officia qui aut amet sit. Pariatur quia ea quas. Ea dolorem nulla quaerat ducimus ullam. Corrupti repellendus ea consectetur. Ipsum ratione esse. Veritatis itaque adipisci voluptas. Enim voluptates sint eius. Inventore pariatur placeat. Laudantium quasi magnam dolor labore esse aliquid ducimus debitis. Impedit eum dolore. Soluta minima fugit odit odit. Tempora quis quo.

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