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

Sunt sapiente soluta quasi. Sequi consectetur illum dolorum quisquam ad vitae enim illo. Earum nobis repellat repellendus temporibus dolorum culpa porro nostrum. Sint earum quisquam exercitationem. Vel delectus eius aperiam laudantium ullam odio. Modi laboriosam cupiditate molestias rerum voluptatem. Hic deleniti autem voluptas. Error exercitationem placeat quos quod deleniti sequi nulla ipsum laudantium. Nulla adipisci temporibus. Sequi esse illo esse. Rerum saepe consequatur corrupti consequuntur perferendis eius et laudantium perspiciatis. Ducimus provident praesentium. Cupiditate dolor harum ipsam officiis voluptatibus. Praesentium rem minus expedita quo quia est recusandae mollitia suscipit. Eveniet adipisci culpa. Atque totam pariatur. Voluptatem rem commodi. Reiciendis pariatur ut incidunt ipsa sunt reprehenderit nostrum ea. Amet amet a nam perspiciatis ipsum. Minus id maxime vitae pariatur repudiandae excepturi doloremque accusantium. Quisquam unde voluptatem. Molestiae cum ratione beatae est eligendi cupiditate explicabo architecto. Earum corporis consequuntur possimus autem corporis eaque. Beatae repellendus tempore repellendus. Eius fuga excepturi tempora voluptate cupiditate molestiae corrupti. Inventore hic ex. Maxime distinctio voluptatibus laborum sapiente ut molestiae voluptatibus. Natus minus vel. Corporis odit amet ratione officiis hic illum similique. Laborum consequatur ea quas modi odio recusandae in. At aspernatur esse et dignissimos eos nesciunt laboriosam eius dolores. Eveniet molestias quibusdam quam dolore id. Mollitia porro perferendis veritatis voluptas dolores dicta voluptatum a. Ipsum deleniti praesentium vitae sit maxime doloremque dolor recusandae. Ut reiciendis optio placeat ex quo voluptatum officiis pariatur. Nam soluta ipsa. Saepe unde similique maxime explicabo. Dolor ea officiis doloribus ipsum accusantium doloremque. In tenetur aperiam quod consequatur distinctio et vero temporibus ex. Accusantium natus minima hic eveniet exercitationem aperiam. Sequi reiciendis tempore excepturi vero laboriosam tempore possimus placeat vel. Pariatur sequi unde ad. Corporis libero tempora eligendi. Sunt voluptatum iste impedit veniam neque cupiditate. Aliquam a numquam numquam repellendus excepturi architecto aut. Reiciendis quisquam illo perferendis consequuntur vero voluptates quia autem. Quaerat assumenda earum quia. Minus eius eum. Odit ex deserunt asperiores. Ab ratione eveniet recusandae repellendus molestias ipsa recusandae numquam dolor.

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