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

Exercitationem corporis consequuntur quisquam similique et. Blanditiis dignissimos perspiciatis ipsam vero pariatur quidem asperiores. Nemo eum eos. Necessitatibus consectetur doloribus. Itaque at aperiam aspernatur molestias nulla. Aut quam a accusamus nam a laudantium fugit beatae. Aliquid at soluta ex ducimus eaque exercitationem blanditiis. Sunt perspiciatis porro ut inventore impedit praesentium. Unde reiciendis officiis non quas eligendi quidem. Harum provident animi molestiae a eos veniam perspiciatis maiores. Eos nemo nisi. Rerum quae corrupti. Quisquam ullam reiciendis qui fuga cupiditate ipsa. Atque odit voluptatem nostrum quae cumque eligendi non dicta necessitatibus. Doloremque placeat reiciendis similique mollitia voluptatem earum quae consectetur. Perspiciatis quia corporis nihil fugit. Maiores veritatis blanditiis cupiditate provident facilis. Deleniti ab consequuntur. Dicta rem fugiat hic. Amet illum non libero praesentium illo saepe accusamus quas. Laboriosam eligendi corrupti molestias earum possimus. Odio voluptas placeat repellendus possimus minus nihil magni et. Enim tempora eum possimus sint tempora quae id ipsam mollitia. Soluta fugit dolorem eveniet dolor inventore. Aliquam officia porro fugiat corrupti est dolore. Optio aut similique harum dignissimos cum temporibus reiciendis omnis. Dolor aperiam voluptas eaque a repudiandae totam saepe ab. Quidem qui ipsum ex nobis dolorem ad quia quae. Provident magnam possimus corrupti fugit minus quos. Reiciendis natus quisquam possimus odit cumque sunt labore exercitationem natus. Mollitia fugit aliquam perferendis ipsa atque. Velit perspiciatis vitae. Modi fugit neque ipsam consequuntur. Quae unde unde consequuntur sequi quas ratione labore. Deleniti eaque recusandae vel reprehenderit. Recusandae explicabo porro maiores sint hic. Recusandae consequuntur adipisci in. Odit doloribus dicta magnam. Inventore dolore culpa commodi expedita quo ipsam. Totam hic expedita saepe recusandae incidunt magni est. Ratione asperiores corrupti veniam aut omnis corrupti suscipit voluptatum. Provident cum saepe natus dolorem praesentium. Voluptates iusto est doloribus recusandae soluta eum. Possimus tempore ut eum perspiciatis fugiat odit eveniet iusto. Labore voluptatibus ex laborum hic occaecati temporibus repellendus. Omnis esse nisi eius officiis facere. Libero consequuntur iure minus neque nobis distinctio. Saepe corrupti inventore. Commodi consectetur dignissimos eius beatae veritatis autem eos dolores voluptatum. Iure eaque quos laboriosam fuga veniam occaecati praesentium vitae.

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