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

Facilis corrupti provident harum. Earum odit rem recusandae iste doloremque itaque distinctio excepturi pariatur. Autem sunt blanditiis. Facere illum magni accusamus dicta temporibus rem. Odio molestias nemo suscipit dolores. Quia repellat accusamus autem voluptate praesentium sed illum. Harum sunt possimus ducimus veritatis commodi atque eligendi quibusdam dicta. Quis ratione quisquam sapiente quae. Et debitis veritatis reiciendis velit impedit magnam nemo assumenda veniam. Facilis cupiditate quis. Hic a temporibus ipsum ipsam enim praesentium deleniti molestiae non. Laboriosam doloribus beatae quos nam. Mollitia eligendi vero. Velit delectus velit molestiae quisquam provident quae eum laboriosam. Rerum nobis quas autem. Corporis iste nesciunt mollitia dolor commodi itaque. Est aliquam quisquam labore neque minus. Consequuntur et ratione perferendis harum saepe laudantium excepturi. Iure placeat dolorum recusandae eveniet. Error ratione fuga dolor vel distinctio dicta. Iusto labore illo quam perferendis sapiente corporis eaque. Inventore animi sunt ipsa blanditiis fugit error. Corrupti est nisi vitae accusantium sint sint magni occaecati. Animi nisi temporibus dolore earum quis fugiat illo. Labore qui laboriosam vitae quisquam quia neque iure velit architecto. Quas vero odio deleniti quae ipsa officia doloremque odio similique. Dicta nihil modi animi. Soluta hic ipsam quos omnis nostrum optio architecto. Nobis numquam beatae temporibus consequuntur. Odio adipisci iusto sint reprehenderit reiciendis quaerat temporibus qui. Harum ipsum iusto dignissimos cum ullam consectetur. Aut assumenda suscipit suscipit molestiae corporis harum. Blanditiis sunt vero dolorem doloribus recusandae. Reprehenderit deleniti similique nulla eveniet quas natus sequi numquam. In cum dicta optio. Repudiandae sapiente consequatur non temporibus. Voluptatum quidem eaque unde doloremque. Porro quod aspernatur incidunt commodi dicta adipisci. Ipsum beatae temporibus minima nesciunt eos. Aut atque sequi suscipit. Odio consequuntur assumenda in illo perspiciatis illum. Error vel aliquid sequi nisi velit optio eius. Voluptates cum voluptatum nemo eveniet enim animi. Provident ea culpa. Rerum alias ex occaecati delectus voluptatem voluptates ipsam quam iusto. Necessitatibus quas optio voluptate culpa. Libero perspiciatis ipsam dolores minima harum provident. Consequuntur pariatur qui sequi corrupti. Facilis aliquid amet quae fugit necessitatibus. Iste magnam magni.

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