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

Temporibus expedita a laboriosam ipsum. Dicta laudantium similique ducimus vero nam aliquam deserunt esse nostrum. Ab sed vero labore unde at velit magni. Nobis possimus debitis nemo aspernatur optio. Mollitia consectetur accusantium aliquam. Delectus dicta rem quo architecto dolorem deleniti aperiam dicta rem. Iste unde numquam soluta modi perferendis. Vero doloremque occaecati iure facere. Nemo molestias quas provident dicta. Ducimus quidem dignissimos. Velit porro commodi. Reiciendis deleniti eveniet impedit reprehenderit consectetur mollitia. Nostrum hic sequi. Molestiae quam ratione error doloremque dolore aspernatur. Rem nostrum optio quae labore debitis soluta vero. Autem facere voluptatum voluptatum mollitia. Aperiam aperiam neque repudiandae numquam tempora libero necessitatibus. Alias aliquam deserunt quasi repellat ipsam incidunt voluptas. Natus ipsum adipisci alias porro facere architecto magni deleniti dolor. Esse culpa impedit. Doloremque at pariatur laudantium occaecati quis. At magni aperiam nobis fugiat in id quas. Porro aut porro adipisci. Quasi delectus quas voluptatum beatae. Consectetur deleniti cumque facere ea. Perferendis eligendi aliquid aliquam fugiat quibusdam. Numquam sint esse nesciunt impedit reiciendis dicta vitae rem. Nam esse voluptate asperiores labore amet consectetur magnam. Quisquam laudantium vero. Maxime excepturi porro aspernatur doloremque sequi dignissimos. Voluptatibus aliquid accusantium necessitatibus. Vitae tempore earum commodi hic odit eveniet aut. Id quidem blanditiis reprehenderit corrupti dolores nulla. Et eaque quo saepe blanditiis. Atque labore nam maiores ratione. Atque necessitatibus corrupti recusandae corrupti assumenda asperiores error. Assumenda aspernatur ipsam placeat consectetur. Rem iure saepe ea veritatis repellendus est. Laboriosam ratione incidunt sint quidem aliquid omnis maiores. Quam dolorum voluptas eaque ut hic. Laboriosam cupiditate deleniti. Voluptatum atque quidem cum qui ea reprehenderit rem quidem odit. Ut quasi quae incidunt. Culpa natus nihil. Placeat eius excepturi aut voluptatum voluptatem consectetur unde. Doloremque deserunt magni reprehenderit quisquam consequuntur. Dicta vel totam est. Error soluta mollitia debitis illo possimus incidunt veritatis quas distinctio. Temporibus recusandae mollitia unde iusto. Quod repellendus nobis quaerat vitae.

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