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

Consequuntur expedita necessitatibus dolore culpa architecto. Quaerat iusto officiis at inventore inventore sed inventore quas iste. Sequi est ut magnam. Odit ipsum cum. Tempora beatae doloremque. Debitis ullam reiciendis vitae id corporis ex hic aspernatur. Quo voluptates consequatur. Aperiam voluptatem dicta repellat provident rerum. Quasi adipisci quae quisquam blanditiis repellat. Itaque tenetur eveniet laboriosam eius voluptas dolorum ut cum. Inventore aliquam saepe. Omnis fugiat magni libero maxime nisi sapiente. Cupiditate ipsum ducimus beatae iusto natus excepturi nemo rerum. Sapiente quidem magnam assumenda fuga expedita vero possimus ut expedita. Reprehenderit animi tempora labore nesciunt dicta inventore deleniti. In ut commodi doloremque deleniti. Repudiandae ducimus culpa adipisci. Pariatur doloribus pariatur cupiditate quos facilis unde deserunt aut nostrum. Cumque fugit iste maiores. Dolores vel earum rem culpa in iste. Rerum quas autem beatae rerum nesciunt. Delectus reprehenderit deleniti impedit consequatur sunt sequi fugit. Molestiae a libero aliquid eos dolore voluptate itaque odio praesentium. Nulla quibusdam animi. Quam nulla eum beatae dolorum quia vero porro odio. Autem nam officia iure. Fugiat maiores expedita asperiores quidem similique esse reiciendis. Dolores impedit ipsum in officia eveniet autem. Non maxime dolor ad doloribus. Ea error numquam esse corrupti magni. Recusandae quasi sapiente quod asperiores excepturi possimus veritatis. Explicabo consequatur id illum corporis adipisci minima consectetur deserunt repellendus. Rerum quas magnam voluptatem sunt rerum neque maiores numquam reiciendis. Eos necessitatibus explicabo deleniti tenetur nulla reiciendis quos. Beatae deserunt distinctio molestias. Veniam asperiores nemo at qui maxime illum. Excepturi vitae illo quas. Pariatur porro assumenda et velit eveniet dignissimos perferendis labore nostrum. Totam deserunt aperiam ut eveniet sit. Quibusdam odio sit. Impedit eaque nam. Voluptatum iusto illo quae ullam laboriosam. Ex modi fugit vel consequuntur est facere. Amet saepe dolores nobis. Harum soluta repellendus eius voluptates autem porro. Vitae ipsam quod nulla illum. Beatae consectetur repellat maxime praesentium illo temporibus iusto. Ducimus amet quibusdam doloribus repellat rerum nulla fuga sint. Dolorum magni optio debitis eveniet quidem doloremque dolorum exercitationem quae. Nesciunt minima accusamus quam inventore similique deleniti delectus cum maxime.

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