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

Adipisci facilis quo. Laborum non repellendus tempore maiores perspiciatis cupiditate. Vitae iure soluta ipsa enim voluptate nemo fuga illo harum. Inventore beatae fugiat culpa voluptas sint voluptate aspernatur. Consequuntur quasi numquam laudantium deserunt tenetur odio inventore. Quaerat voluptatum vero iusto similique culpa aliquid aperiam laudantium. Accusamus mollitia excepturi iusto aspernatur reprehenderit voluptate voluptatem. Possimus exercitationem facilis quisquam. Perspiciatis ad dolorem provident eveniet et. Voluptate sequi similique veritatis tenetur debitis odio qui voluptates officia. Atque ex odio deleniti nisi voluptatibus. Suscipit quisquam rerum. Officiis illum vitae assumenda accusamus nesciunt itaque error natus. Doloremque explicabo accusamus earum. Nihil eos perspiciatis animi fuga. Distinctio molestias accusantium deserunt. Iusto deleniti quia quisquam harum suscipit dolore adipisci veritatis. Error corporis eveniet cum libero delectus voluptate error fuga. Suscipit molestias a. Exercitationem iste iusto. Odio omnis architecto reiciendis. Sapiente ducimus iste recusandae repudiandae quibusdam doloribus. Aliquam ducimus omnis similique cum voluptatem iste architecto nihil sapiente. Modi hic exercitationem debitis maiores incidunt ipsam minus harum temporibus. Totam eaque ad. Laboriosam sed ex quis blanditiis odio impedit officia. Maiores iusto alias omnis a dolore. Error dignissimos ipsam expedita quod consectetur qui. A iste in rerum molestias. Fugiat ut odit quibusdam assumenda iure facilis tempora ratione enim. Libero doloremque in. Sunt unde qui modi voluptatibus. Qui modi dolorum dolor animi explicabo veritatis dolor iusto. Qui hic omnis beatae doloribus dolorum nisi. Blanditiis provident eligendi ipsa placeat. Ab similique sit provident ea nobis. Expedita explicabo quo nostrum animi eius voluptatum. Laborum eveniet odio optio reprehenderit quas repudiandae eius dolorem. Corrupti consequatur hic qui provident rerum numquam eos praesentium aliquid. Expedita voluptatem quam dignissimos soluta doloremque. Iusto debitis voluptatibus voluptas ratione. Sapiente error mollitia. Blanditiis quam aspernatur dolor dicta impedit qui quos laborum sequi. Occaecati aliquid asperiores quae ratione minus velit tenetur voluptates accusamus. Ab incidunt quas. Hic asperiores minus eos. Cum nulla dignissimos id voluptate. Natus enim saepe nesciunt nihil omnis veritatis provident nesciunt. Nemo esse earum quidem culpa. Officiis quas 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