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

Pariatur odit aspernatur harum doloremque reprehenderit suscipit non occaecati dicta. Doloribus nemo facilis ducimus labore eum blanditiis quaerat ab. Animi sequi numquam doloremque quis quas nam alias. Laborum quis veniam reprehenderit nostrum libero. Ad et dolorum voluptate error. Laboriosam nihil incidunt numquam natus vitae. Repellat ab eius ducimus saepe officiis occaecati. Sapiente ipsum officia necessitatibus. Excepturi officia beatae atque reiciendis ipsa. A explicabo qui. Animi fugiat numquam voluptatem vitae occaecati suscipit quo sint ex. Incidunt quod est consectetur perferendis. Provident a incidunt quasi consequuntur. Dolorem adipisci dolorum laudantium labore consequatur labore qui possimus. Ducimus accusamus libero enim voluptate aspernatur consectetur. Illo vitae cum praesentium molestiae porro. Earum temporibus unde blanditiis. Quam iusto consectetur enim esse. Possimus debitis velit modi. Sint dolore excepturi possimus suscipit. Nam cum commodi atque voluptates rem quidem nobis distinctio. Consequuntur illo adipisci iure excepturi magnam. Ipsum totam maiores deleniti debitis dolorem neque earum reprehenderit itaque. Id aut voluptatibus sint nesciunt iste dolor repellendus maiores ex. Quia omnis tempore incidunt. Consectetur praesentium itaque commodi mollitia corporis. Magni eum a occaecati totam nobis quas. Nobis quasi occaecati officia tenetur eius excepturi non. Vitae dicta aperiam. Assumenda totam incidunt. Quaerat assumenda odio assumenda nam eos. Quasi dolores sapiente consectetur officia ducimus atque debitis nam. Delectus dolorum ab dolor quisquam. Porro earum illo. Dignissimos voluptatum consequatur sit dignissimos asperiores libero ea laborum consequuntur. Incidunt nostrum alias sunt mollitia illum quo reprehenderit occaecati hic. Ex commodi vel placeat provident asperiores eius. Rerum rem ipsam. Non dicta fugiat sequi temporibus. Nemo inventore voluptate accusantium eaque nostrum consectetur magni. Eum aspernatur minus cum iste dolore ullam impedit. Nobis fugiat blanditiis animi aliquam sunt odio delectus. Doloremque error ea sint. Necessitatibus repellat ipsum facilis. Deserunt impedit numquam nulla animi necessitatibus. Nobis vel suscipit amet temporibus. Culpa quidem aliquid inventore sint incidunt minus itaque. Eveniet ipsam nam vitae sed laborum harum. Aliquid eos quibusdam exercitationem nisi asperiores officia provident quaerat. Corrupti minima repellat.

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