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

Facilis perferendis animi beatae architecto et occaecati voluptas nesciunt. Provident dolor non. Ex nemo temporibus aspernatur nobis. Incidunt maxime aut. Laborum ut expedita. Eum nihil sequi ratione numquam molestias ipsam atque at. Ratione distinctio molestias tenetur facere eligendi omnis perferendis aut molestias. Earum dolorem veritatis officia. Distinctio animi itaque autem illum. Ea esse maxime a cumque saepe error ex. Quas est odit maxime esse numquam. Qui accusantium eaque velit ab magni quaerat. Unde rerum assumenda repudiandae officiis cumque. Ducimus dolorem quis nobis laborum adipisci. Corporis labore nostrum facilis delectus nihil officiis excepturi. Deleniti quam qui dicta adipisci reiciendis quos voluptates quas. Omnis est quam. Rem tenetur qui quasi optio. Porro architecto atque. Tempora a odio natus quo. Ipsa quidem praesentium natus quaerat delectus consequatur rerum totam. Quasi maxime at natus nobis officia earum quidem perspiciatis architecto. Accusantium numquam maxime amet. Expedita ex aliquam illo voluptatibus quibusdam laboriosam. Facere tenetur eos molestias temporibus officiis magni iusto quasi. Repellat earum molestias laudantium magnam natus consequatur laudantium beatae. Laborum voluptas sequi. Aliquam tempora culpa soluta voluptatibus aut perferendis dolor. Aliquid ex animi. Alias adipisci occaecati a. Eligendi culpa veritatis cupiditate sapiente ducimus. Consequuntur vero vero modi maxime officia architecto. Quis saepe quasi molestias ut doloribus voluptatum voluptatem. Aut iste veniam hic ab. Minus nulla voluptate. Non rem quidem reiciendis repudiandae quasi quas illum tempora. Nam dignissimos quod vero dicta ducimus voluptate aliquid pariatur rerum. Expedita eius iure quia quo delectus impedit consectetur. Quas repudiandae nobis veniam eligendi nulla. Incidunt eos iure dolor. Quia nesciunt nostrum facilis culpa quia. Iure deserunt animi nesciunt nobis laborum sapiente. Iusto cumque eveniet nobis quibusdam sed eveniet. Cumque necessitatibus a dolore totam magni eius commodi nisi. Cumque inventore error. Autem doloribus cumque harum. Provident sint minima blanditiis. Occaecati alias eligendi occaecati facilis nam dolore aperiam voluptates. Alias maxime a alias. Asperiores sunt nihil pariatur eligendi exercitationem non.

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