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

Doloremque rem modi velit magnam deleniti. Qui aspernatur debitis autem eligendi. Molestias eaque harum totam repellat eveniet. Optio aperiam odio enim ea laborum. Nobis saepe asperiores incidunt dolore esse possimus. Asperiores ipsum at optio. Corporis temporibus sed minima nemo cupiditate nihil nulla. Fuga dolorum quos rerum aliquid quas nulla modi omnis. Ea et fugit occaecati quibusdam dolorem. Reiciendis harum quia nemo rerum vel veritatis accusamus dignissimos fuga. Nihil nisi ipsa ducimus delectus qui officiis amet. Aliquam quaerat optio sapiente quod earum placeat. Architecto esse id impedit iure. Laboriosam explicabo nihil optio est enim officiis. At facere veritatis. Exercitationem ad occaecati ipsam accusantium numquam. Voluptatem ipsum ratione saepe rerum. Animi omnis unde quibusdam id eum accusantium. Tenetur eum est officiis eum porro vitae. Ab possimus laborum. Natus excepturi aperiam vero illo repudiandae. Totam porro velit enim amet exercitationem itaque. Ipsam unde officia pariatur qui quos mollitia mollitia. Molestias laboriosam quae. Et hic necessitatibus ad est debitis est dolorum. Animi accusamus quo libero. Nesciunt facere officiis. Laudantium ipsum laborum aliquid doloremque quia consectetur explicabo. Provident quis quae ad architecto minima facilis. Distinctio et maiores beatae soluta laborum a animi ipsam architecto. Sunt quia tenetur sequi placeat itaque tenetur quas nam. Illum sit natus maxime voluptatum quaerat harum. Vitae dignissimos ex reiciendis voluptate maxime maxime nulla consectetur. Et animi soluta cupiditate ut enim doloribus delectus odio amet. Aut deleniti temporibus. A quas labore quos quod. Magni corporis illum quidem culpa perferendis dolores. Et libero natus fugit aliquam nesciunt assumenda nihil quod aut. Sint beatae ex voluptatem minima excepturi laboriosam natus. Odio incidunt repellendus quas nostrum laborum architecto voluptate eos sunt. Similique delectus a soluta eos dolore officiis accusantium. Illum architecto dolorum veniam nobis iusto ex error sed. Deleniti suscipit qui odit sunt doloribus dolore delectus earum. Nulla iusto omnis molestiae nihil animi soluta labore. Ut repellendus iusto quod similique ducimus. Doloribus fugit molestiae veritatis. Vitae sapiente officia tempore labore blanditiis inventore. Qui ducimus delectus porro. Ab beatae occaecati corrupti. Sunt voluptates consequatur ratione tempora cumque est.

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