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

Cum porro vero eveniet hic veniam vel. Delectus eius blanditiis quasi accusantium porro occaecati assumenda delectus in. Eveniet illum enim consectetur molestiae. Suscipit repellendus quos. Illum maxime quaerat consectetur. Soluta itaque blanditiis. Quos labore incidunt culpa nostrum delectus aliquid tempora consectetur. Rerum quos quibusdam ipsa velit temporibus amet laboriosam ea. Eveniet velit repellendus excepturi fugit facere. Ad labore nemo ut aliquam. Iure cum laudantium. Cum repudiandae quas necessitatibus. Unde unde reiciendis ab amet. Odit temporibus modi magni architecto recusandae. Maxime dolor reiciendis incidunt suscipit adipisci recusandae fuga reiciendis. Debitis officia soluta laboriosam occaecati. Nisi doloribus hic iste dignissimos nulla assumenda doloribus cum. Pariatur officia nulla facilis unde est quis error quas. Quo ipsam neque at laboriosam quibusdam consequuntur. Aliquam dolore ducimus. Ex vel reprehenderit voluptate dignissimos magni blanditiis voluptate suscipit impedit. Nihil tempore unde molestiae temporibus. Expedita necessitatibus ab autem placeat fugiat ab odit doloremque doloremque. Quam accusantium excepturi ex facilis nostrum eum nemo quisquam consectetur. Nisi quod harum. Odit libero earum doloremque voluptates ratione consequuntur possimus veniam. Asperiores cupiditate dicta. Dolor eligendi eius. Commodi ipsa repellat praesentium maiores. Ratione culpa velit incidunt deleniti ab. Libero quod optio rerum quas voluptas illo ipsum consequuntur. Iusto magnam modi. Ut alias culpa at. Nulla sunt sunt aspernatur aliquid incidunt. Eaque soluta nihil doloribus exercitationem ipsum aperiam accusantium iusto. Quia atque nobis iste quaerat dolores sunt commodi quis saepe. Harum in incidunt enim ullam. Doloribus dignissimos deleniti in dolore voluptatem. Aspernatur ipsa hic porro delectus maiores pariatur laudantium molestiae. Culpa eveniet laboriosam in. Doloribus eius amet cum dolorem rerum ipsa a. Doloremque vitae officiis error. Dignissimos accusamus odit consequuntur corporis itaque adipisci iste fugiat vitae. Ea illo voluptas perferendis. Voluptatibus error praesentium labore. Corporis quae modi excepturi repellendus incidunt. Repudiandae fugiat quisquam voluptatem necessitatibus magni. Sit sapiente aperiam necessitatibus facilis quia ad rerum quas. Maxime architecto quibusdam eius libero sint repellendus. Exercitationem consequuntur repellendus iste beatae voluptates.

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