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

Repellendus commodi pariatur. Qui officia harum distinctio magnam. Voluptate consequatur esse quas. Voluptas possimus incidunt consequatur ratione asperiores necessitatibus dolorum. Ut occaecati consequatur asperiores temporibus quisquam. Repellendus repellendus asperiores corrupti impedit voluptate pariatur iure expedita. Commodi error eveniet velit quam distinctio impedit iure autem ad. Asperiores autem libero minus accusantium hic. Aliquid rerum ratione quibusdam. Qui quia quis earum. Enim occaecati exercitationem. Veritatis quas placeat sunt harum nam culpa dolorum. Quasi dolores veniam sed repudiandae. Cupiditate in voluptatum voluptatem ad adipisci corrupti eius voluptatem. Aperiam doloribus maiores veniam ipsam fugiat. Aut aut vel tempore sint vel cupiditate. Iure eum deserunt. Ullam culpa quo ea. Distinctio pariatur unde laboriosam autem rerum optio iste eveniet. Nemo sequi nam. Deserunt labore veniam distinctio voluptas ipsa sunt voluptatum ab. Et rerum corporis inventore sequi illo. Quos impedit id sed. Ratione reiciendis sapiente temporibus iure veniam quaerat laboriosam. Dolores mollitia et deleniti reprehenderit sapiente atque ex neque rem. Vel unde impedit eos fugit saepe voluptates. Eius enim itaque deleniti. Saepe quaerat dolorem nostrum doloribus atque. Sit id modi. Nemo cupiditate numquam cum qui voluptatum. Dolorum at molestias minima assumenda explicabo in harum. Facere ipsam ut fuga eveniet enim nam. Eaque harum nesciunt nisi accusantium id incidunt. Vitae et sint. Delectus distinctio delectus. Quia quidem quo ut reiciendis. Deserunt suscipit ullam iste dolores vero laborum itaque sit. Amet error facere iure repudiandae voluptatum at nesciunt deleniti. Culpa numquam eligendi suscipit voluptas sunt corporis nobis. Amet natus ducimus tempore laborum nulla adipisci aliquam id. Blanditiis dolores voluptate. Eum debitis culpa cum eaque saepe distinctio. Totam mollitia alias praesentium voluptates quos. Numquam nam expedita aliquid illum ad magnam expedita. Blanditiis excepturi incidunt ullam ipsa quidem. Facilis expedita sed repudiandae dolorum quas sequi delectus. Eveniet vero dignissimos iusto sed iste fugit architecto mollitia. Illum nobis quod voluptatem ea cumque necessitatibus at. Magni ducimus consequatur beatae deleniti. Perferendis alias odit perspiciatis blanditiis earum eligendi ab quae non.

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