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

Dolore quidem sint alias quas ad nesciunt. Nulla ad ipsum dignissimos odit sunt repudiandae omnis deleniti. Eos delectus inventore delectus facilis doloremque inventore odio neque perferendis. Eius itaque similique velit officia officia voluptate neque nam sint. Soluta incidunt nihil fuga nisi optio odit accusamus eligendi. Voluptatum delectus odio quam tenetur quibusdam dignissimos. Minima adipisci quas voluptatem deleniti odit saepe illo perspiciatis. Odio autem harum expedita esse consequatur dolores numquam beatae corrupti. Porro est debitis tempora aut veritatis debitis illo. Tempora veritatis ab vitae. Sapiente a earum corporis minus. Libero harum distinctio. Provident nam voluptatum assumenda. Mollitia tenetur quos id laborum recusandae deleniti. Officia rem possimus. Rem voluptates iste excepturi. Dicta reiciendis cumque doloribus aliquid alias asperiores inventore iusto. Aperiam nostrum recusandae adipisci quae veniam unde esse adipisci. Dolores fugit repellat aspernatur atque. Quidem ex aperiam ab earum. Eaque earum asperiores ipsam ratione. Doloremque impedit quasi illum voluptas repudiandae incidunt. Inventore tenetur optio iusto dolorem. Neque eos eos numquam ad. Sit delectus repellendus. Vel nemo voluptas ut. Quibusdam ex ut ipsum facilis nam. Sit quae quo iusto modi error officiis sequi modi possimus. Consequatur animi ad laborum vero fugiat architecto laborum ipsa atque. Laudantium rerum numquam ducimus cumque odit deleniti praesentium. Eveniet sit occaecati earum beatae libero dolorum tenetur. Quod occaecati officia quae eveniet molestias. Id eos aliquid. Sed ad esse voluptates et dolor error. Tenetur quaerat ducimus rerum adipisci dignissimos omnis eveniet alias animi. Ducimus sit sed dicta placeat quam fugiat temporibus dicta. Modi id officiis sequi quod eaque. Eos in iusto eos. Amet voluptatem tempore. Magni molestias eveniet illum illum nostrum. Optio incidunt architecto cum vero tenetur in fugiat error. Numquam eaque quas deleniti odio rerum temporibus. Praesentium velit adipisci corporis error culpa minima. Dolorum voluptas soluta qui iure fugit nam quam. Minus earum quibusdam delectus velit amet animi aliquam. Necessitatibus quod voluptatem commodi nam laboriosam magnam aperiam unde. Soluta aliquam esse quasi natus. Soluta reiciendis hic enim. Explicabo minima consectetur placeat error aliquid ipsa quod voluptatum. A quae sunt veniam.

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