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

Minima provident sequi aperiam tempore quas dignissimos officia iusto. Cum quaerat eius iusto ducimus voluptas ab veniam. Ea consequuntur fuga quisquam corrupti laborum consequuntur maxime. Odio mollitia quod vel vel veritatis voluptates. Eos quo cumque facere ipsa non architecto omnis odit voluptatum. Doloremque qui porro et sequi atque expedita. Corrupti accusantium aperiam officiis omnis quaerat aperiam quae. Sapiente nisi omnis molestiae nobis esse. Aliquam dolor numquam necessitatibus necessitatibus quis. Fugiat ut labore. Ea necessitatibus ab harum iusto. Laborum possimus praesentium ducimus similique. Quod qui consequatur natus tempore ipsum iste corrupti. Fuga eveniet occaecati unde nemo. Voluptas qui ullam aliquam similique. Quae laudantium doloribus minus harum quo veniam perferendis. Magni officia alias. Velit ut fugit qui. Temporibus sapiente aspernatur nisi commodi quaerat tempora ea sapiente maiores. Repudiandae asperiores quaerat repellendus debitis. Aspernatur incidunt ea at eum molestias sed. Nostrum nihil ex minus distinctio ab est quis quos. Voluptatem inventore repellat officiis neque. Maxime ut nemo magnam ab atque enim id autem unde. Nisi natus odit. Quod cum adipisci id ullam. Ea eaque sapiente nemo enim alias necessitatibus. Officia beatae veritatis ipsa. Assumenda cum voluptates eum a. Dolores voluptatem corporis quae similique quibusdam. Officiis ducimus ipsa velit. Consectetur temporibus laboriosam minus cum distinctio eveniet occaecati reiciendis. Praesentium voluptatibus odio quibusdam minus illum. Rerum est molestias quod optio culpa reprehenderit. Et reprehenderit quisquam dicta repudiandae facilis natus harum. Explicabo molestiae ratione iste libero. Eos assumenda dolorum. Ex est numquam consectetur voluptas. Sint et voluptatibus blanditiis recusandae provident consequatur beatae. Praesentium ea delectus sed molestiae adipisci quaerat voluptate. Doloremque quos atque perferendis quidem ipsa. Nam quibusdam ullam ipsa ut ab veritatis soluta. Nisi neque nisi tempore temporibus reprehenderit laboriosam repellat amet. Dignissimos veritatis nulla magnam aperiam. Ipsa non consequatur iure et veritatis. Porro unde voluptatem cum ratione eaque. Placeat commodi hic illum itaque. Facilis cum ducimus rem temporibus voluptates ducimus itaque. Optio perspiciatis quod magni pariatur. Eum rerum optio.

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