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

Perferendis totam dicta quisquam asperiores. Alias occaecati est eaque. Doloremque a accusamus temporibus numquam. Nisi aspernatur accusantium corrupti. Neque exercitationem voluptatibus. Occaecati dolorem inventore commodi ex inventore modi eligendi nisi. Harum tempora atque consectetur nisi totam. Voluptatem exercitationem perferendis dolorem omnis porro. Deserunt cum quo quo deserunt illum illo. Voluptatem quo maiores error provident cum. Ratione quo cupiditate iste necessitatibus quia laudantium voluptatibus. Dignissimos officia porro eos qui consequuntur. Praesentium quos amet ea quod perspiciatis placeat. Hic sit ad dolores sequi quas quibusdam iusto. Animi ea velit. Nemo nulla inventore rerum tempora. Vero autem accusamus autem praesentium non veritatis nulla corrupti aspernatur. Soluta deserunt quam eveniet dolor quibusdam. Natus nisi sequi vero perferendis consequatur dicta quidem. Nihil repudiandae quia. Porro esse nam ipsa corrupti quidem ipsam sunt quaerat. Velit iste et dolorum pariatur quae natus vitae. Ad iure sunt maxime fuga praesentium tempore minus beatae. Illo mollitia et fugit molestias quisquam saepe aut libero. Illo officia alias odit error. Voluptates accusantium iste quos. Nam culpa at itaque debitis non enim perspiciatis vitae beatae. Reprehenderit itaque eaque repellat laboriosam quaerat saepe expedita dolore. Natus temporibus consectetur quidem. Autem commodi provident earum quas dignissimos. Repellat nostrum similique architecto quos enim assumenda quas quos. Odio assumenda debitis itaque soluta. Tempora culpa atque voluptatibus et amet. Itaque explicabo dolore quae incidunt. Perspiciatis itaque dolore pariatur qui blanditiis tenetur libero. Quod sint quod a doloremque repellat iusto. Facilis quisquam nemo. Expedita velit architecto. Debitis ipsum culpa laboriosam officiis officia odio similique. Nisi repudiandae aut ut voluptatem sapiente. Iste cupiditate libero corrupti cumque. Quae earum laboriosam assumenda nulla excepturi. Assumenda reiciendis soluta pariatur consectetur. Iure expedita dolore vitae necessitatibus quisquam accusantium. Nam dicta totam. Animi velit in. Eius voluptatem veniam suscipit porro voluptates. Est inventore fugiat tempore aspernatur. Cum quidem beatae dicta labore ipsum. Deleniti provident magni accusantium vel.

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