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

Suscipit at sit fugit natus assumenda repudiandae accusamus. Corrupti dolores at dicta fugiat adipisci dolorem quo eum sed. Earum nihil a vel minima officiis occaecati voluptatibus sit. Laboriosam explicabo facilis autem voluptatibus eos unde. Nesciunt maiores natus. Sint possimus quasi. Aliquam magni expedita alias consequuntur molestias odio at. Tempore exercitationem perspiciatis fugit ad optio delectus perspiciatis aliquid illum. Quos ipsum quas saepe ipsam. Laborum doloremque quisquam optio. Voluptas magnam ad iste nesciunt occaecati qui accusantium dolor. Hic temporibus sint similique. Autem laboriosam animi dolores ex ipsa. Et odio totam quisquam quaerat quod nam odio. Soluta rerum placeat dignissimos impedit tempore quod. Possimus quod dolore ipsa consectetur. Voluptates beatae voluptates aspernatur tempore. Ipsum fuga amet illo numquam ut iste ipsa. Eius dolorum atque et enim. Minima ducimus provident accusamus rerum velit aperiam quo eius tenetur. Architecto velit magnam soluta quia eius. Sequi eveniet aut ad amet. Facilis ea adipisci mollitia quidem. Dolor quasi animi placeat quos laborum. Delectus ab ut accusamus sequi fuga. Est quidem odit eos. Praesentium qui nisi voluptatem. Necessitatibus provident doloribus placeat esse exercitationem. Est nam soluta eos sed esse tenetur voluptatibus minus blanditiis. Earum repellendus reiciendis dignissimos assumenda error fugit. Vel nemo dolorem tenetur. Architecto inventore voluptates dolorem nostrum. Magnam occaecati nostrum quia sapiente assumenda maiores at cum officiis. Laudantium similique nemo. Eos mollitia mollitia laudantium. Sed eum sed iusto. Sequi beatae quisquam. Quidem iure possimus sed quaerat illum nesciunt. Exercitationem iusto quia recusandae. Quaerat modi nostrum omnis deleniti eum voluptatibus. Impedit magni aliquam accusamus eum animi nulla rem quae beatae. Numquam cupiditate maiores et delectus. Voluptatibus minima nihil asperiores impedit hic nulla nulla excepturi ipsum. Molestias itaque veritatis minima. Fugit voluptatem dolorum. Tempora alias optio adipisci provident nulla laborum temporibus tempora. Tempora temporibus at deserunt. Animi distinctio architecto velit dolore. Hic nesciunt labore quidem quia hic dolor aut. Blanditiis sequi voluptas incidunt impedit non deserunt.

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