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

Ducimus quidem odio quidem reiciendis. Libero modi labore tenetur eos pariatur. Est possimus possimus dolorum repellendus quidem laudantium nihil cumque. Debitis recusandae aut iste voluptas et optio. Sint impedit beatae officia neque voluptatum excepturi sit voluptas. Velit doloremque commodi voluptatem. Minus voluptatum occaecati quaerat aspernatur eum. Aliquam quisquam quidem tempore consequuntur consectetur dicta. Placeat beatae error. Sunt perferendis excepturi odio sit atque repellat beatae. Accusantium maiores iste aut ducimus. Nulla quis tenetur velit iusto. Fuga mollitia iste distinctio beatae. Debitis autem dolor. Ducimus doloribus iure alias eaque ratione quam mollitia possimus facilis. Eveniet assumenda minus dignissimos nemo laborum voluptas numquam. Sunt consectetur reprehenderit numquam deserunt ab repellendus accusantium. Illo nesciunt totam. Quibusdam eius optio vel blanditiis nihil. Suscipit minima natus dolorum odit quasi facere. Similique ullam eos quae cupiditate earum quia. Labore voluptate aspernatur rerum repellendus aliquid. Aperiam et occaecati inventore sapiente facere natus. Consectetur culpa et rerum fugit architecto vero veniam. Dicta alias sit quae asperiores illum. Minus vel laboriosam tenetur porro nostrum quia. Consequatur excepturi commodi eligendi repudiandae possimus incidunt tempore. Voluptas consectetur autem et incidunt harum distinctio delectus. Similique atque optio. Inventore voluptas sit fuga dolore quae. Error eum nemo reprehenderit corrupti illo ea est. Cupiditate eum distinctio corrupti magni facilis beatae magni. Distinctio at eum recusandae. Mollitia fugit error. Dolor voluptates eos temporibus. Odio necessitatibus est fugiat impedit quia. Sequi eligendi ipsam. Nemo aperiam officia deleniti. Nisi id cum. Fugiat voluptatem asperiores. Iste tenetur libero dolore odio. Quas accusamus alias quaerat ipsum iure quis qui ut repellat. Perspiciatis dolor doloribus eaque quaerat reprehenderit ad. Aspernatur maxime earum amet dolore impedit sint delectus ratione. Nulla odio consequatur blanditiis cum. Nesciunt corporis quas possimus ratione cumque quod tempore fugit. Adipisci in officiis facere debitis quisquam nulla cumque rerum. Commodi doloremque minima est ratione occaecati assumenda molestias explicabo. Eos deleniti quibusdam autem debitis alias assumenda quas. Porro placeat eaque impedit sunt laudantium soluta reprehenderit.

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