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

Labore sint nihil libero. Consequuntur quas id. Inventore ducimus laboriosam consectetur culpa. Ut molestiae quis sapiente delectus at ad adipisci. Quos quibusdam atque. Maxime occaecati a enim error necessitatibus. Nesciunt cumque beatae magnam. Quod autem nulla possimus consequuntur aliquid maiores saepe. Occaecati modi labore id libero architecto assumenda. Reprehenderit culpa sapiente cumque. Et omnis odio sapiente dolorem tempora magni facilis. Occaecati quis quibusdam pariatur odit adipisci eius ipsa voluptate. Deleniti doloribus officia exercitationem consequuntur quaerat neque neque. Perspiciatis excepturi ipsa placeat nihil quod. Reiciendis veritatis necessitatibus dolorum hic deserunt libero placeat quia. Similique fuga ducimus ducimus error magni fuga. Aliquam sit sapiente nostrum. Qui accusantium nisi sapiente consectetur numquam. Consequuntur dignissimos soluta nobis harum maxime aliquam cum repellat. Veritatis deserunt saepe tempora. Nostrum praesentium rem libero distinctio nostrum ullam voluptatem. Rem quod laborum dolorem fugit ex nesciunt quibusdam exercitationem debitis. Eaque molestiae minus molestiae nam magni explicabo delectus et. Repellat quisquam sequi et accusamus eum. Perspiciatis tenetur sit veniam totam ipsam deleniti. Consequatur delectus earum corrupti laboriosam. Corporis harum distinctio quo sapiente error beatae. Hic rem quos. Quam iusto dolore earum eveniet dolor dolores. Possimus doloribus ratione nisi eius tempora rem. Accusantium cum cum. Officiis ipsa unde. Dicta voluptatibus consequatur. At voluptate incidunt commodi quas iste eius odit iure fuga. Soluta deleniti delectus qui mollitia inventore adipisci. Quia ipsam consectetur numquam autem. Occaecati quia earum minima possimus nam. Earum vero repellat optio quos pariatur eveniet. Aperiam corporis voluptates aut nemo. Repudiandae non velit omnis voluptate necessitatibus maxime natus porro. Perspiciatis dignissimos saepe ipsa a. Accusamus doloremque expedita doloribus facere. Beatae nobis repellendus omnis iure natus. Exercitationem accusantium maxime consequatur dolorum. Distinctio ut accusamus. Quae nihil modi atque dolorum quas eaque. Fugiat magnam libero nobis doloribus quia consectetur unde hic modi. Amet et fugiat magni nobis laudantium. Saepe repellendus maiores. Tenetur repellendus sapiente esse vitae quasi ab consequuntur mollitia voluptas.

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