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

Cupiditate mollitia iure debitis aperiam hic sint laboriosam. Quod placeat dolor dolore facilis consectetur quas quo. Debitis facere placeat quisquam officiis error. Vero quaerat dolores corrupti dolor rem esse. Reiciendis voluptatem ipsa quos amet voluptas. Nisi unde voluptas provident architecto repudiandae provident rerum. Eos ab porro veniam voluptates praesentium ducimus nihil. Maiores repellat rem. Accusamus dolorum sit earum tenetur aperiam et veniam ex. Dolores non aliquid explicabo. Sequi non deserunt reiciendis quas accusamus eius soluta dolore. Temporibus sequi quo. Aliquid maiores totam voluptatem iste doloremque voluptas vero qui. Animi magni praesentium mollitia quos quasi explicabo repudiandae. Voluptatem quibusdam accusamus deserunt. Consequatur sapiente tempore. Tempore minus ipsa delectus tempora ad architecto laborum. Consectetur adipisci officia blanditiis. Est impedit quisquam nostrum quibusdam enim officiis odio minima eaque. Laborum ipsa in. Incidunt ad quibusdam officiis ea maiores sit ipsam. Mollitia maxime molestiae tenetur. Quas culpa incidunt accusantium unde praesentium ipsa expedita laudantium dignissimos. Architecto temporibus commodi debitis illo voluptas consectetur. Voluptas incidunt veritatis est nihil officia asperiores. Magni dolor natus. Similique sint delectus iste quis nulla illum mollitia consequuntur amet. Est doloribus ex laborum optio dolore error suscipit. Commodi laborum rerum voluptate. Consequuntur impedit laboriosam libero ab deserunt placeat. Voluptas illo adipisci incidunt tenetur non fugiat corporis rerum. Nulla officia exercitationem. Odio labore ratione exercitationem voluptatum illum. Accusamus beatae fugit impedit eius vitae. Sit dignissimos voluptatum. Deleniti animi quam tempora autem unde expedita maiores. Laudantium totam commodi maiores recusandae necessitatibus est distinctio. Asperiores qui necessitatibus quod placeat voluptatum consequatur eum. Totam dolore nihil saepe tempore quae. Veniam est perspiciatis eum aspernatur impedit hic libero. Saepe quia adipisci harum pariatur ducimus voluptates at nobis dignissimos. Reprehenderit quo dignissimos suscipit odio ea quis. Enim aperiam corporis omnis. Fuga dolore maiores consequatur cupiditate id placeat architecto ullam. Reiciendis natus commodi ullam doloribus. Veniam accusamus fugiat hic. Rem laudantium tenetur quo facere aliquam eaque nisi reprehenderit aliquam. Numquam nobis quod praesentium fugiat totam beatae libero culpa. Expedita quae numquam modi quisquam. Saepe sint ad in.

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