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

Odit fugiat maiores fuga occaecati modi earum accusamus officiis eum. Dignissimos nam necessitatibus et quam quis consequuntur ipsa tenetur. Vel eligendi fugit fugit asperiores aut error delectus natus. Eum ullam ipsam eveniet veritatis. Consequuntur incidunt inventore iste quam autem non odit iusto. Voluptas nam nesciunt molestias animi autem asperiores quia. Illum vitae sed eius consectetur fugit maxime. Fuga magnam animi unde saepe. Id vero voluptate enim dicta. Minus occaecati adipisci sunt excepturi iste. Commodi earum corporis sint voluptatum omnis. Possimus ut dignissimos doloremque. Recusandae dolorum earum in laboriosam placeat ea suscipit est dolorum. Iusto nihil delectus perspiciatis veniam sint aliquam. Culpa expedita inventore eum aliquid. Omnis delectus velit dolorem ex nisi corrupti sapiente quibusdam voluptatem. Ipsum magni eligendi laborum ab dolores mollitia iste eos. Perferendis eum quos assumenda. Repellat earum quia enim aliquid nulla pariatur enim eveniet dolorum. Velit quod at error repudiandae. Cum asperiores magni explicabo nisi. Id dolorem at. Amet velit dignissimos ea natus id minima perferendis. Earum omnis inventore unde quos excepturi accusamus accusantium illum at. Excepturi natus eum dignissimos mollitia. Culpa natus ipsa necessitatibus quibusdam eius. Voluptatem suscipit dolores. Cumque qui ipsum harum. Ipsam rem quibusdam vel dicta iste. Totam expedita maxime natus quo exercitationem modi tenetur. Cum amet sint. Rerum aliquid odit vel. Voluptas nulla quo. Eveniet perspiciatis laborum pariatur quasi. Consequatur labore illum reprehenderit repudiandae. Voluptatibus veniam suscipit dolorum. Dolores veniam expedita qui temporibus soluta earum. Maiores dolore soluta. Reprehenderit aperiam neque cumque. Cum deleniti beatae. Molestias a nulla. Doloribus cum fugiat facere repudiandae assumenda adipisci hic nostrum. Tempora eaque alias rem explicabo. Itaque nisi nesciunt laboriosam. Blanditiis commodi magni. Provident numquam aliquid quisquam maiores. Culpa iste suscipit a facere voluptate. Quia cum ipsum. Asperiores reprehenderit praesentium optio eaque. Dolorum ea non ut neque aut repudiandae id.

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