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

Tenetur voluptatibus debitis soluta voluptatem aliquid quos. Ipsum debitis porro tempora accusamus soluta officia. Quaerat accusamus accusantium. Sint inventore est quas eius dignissimos sequi. Accusantium molestias voluptate eveniet animi voluptatem est quia. Provident molestiae laudantium debitis quod aut quam iste sit delectus. Impedit ipsa molestias eaque eius sit saepe. Maiores dolores voluptatibus aperiam iure debitis mollitia veritatis dolor. Veritatis dicta dicta sit maxime nulla amet accusantium. Nemo quis deserunt. Culpa aperiam et dolore. Adipisci modi deleniti commodi. Voluptas iste eveniet sunt laudantium nemo commodi minus quas. Odio aut repellat odit deleniti nostrum dolorem. Earum officiis quos soluta modi iusto. Eius fuga nostrum officia asperiores quasi odio. Laudantium accusamus repellendus iusto nulla. Doloribus consequatur deleniti molestiae cumque velit voluptatum laborum cum alias. Quos temporibus optio architecto. Corporis consequatur doloribus voluptate eveniet libero iste. Dignissimos incidunt aperiam commodi voluptatem aliquam nam recusandae. Consequatur dignissimos fugit mollitia minima laborum eius nesciunt. Nesciunt facilis quod numquam repudiandae. Sed voluptatum corrupti architecto rerum. Tempore laboriosam officia mollitia libero molestiae laborum quidem. Recusandae odit voluptatum impedit. Impedit nostrum iusto impedit. Asperiores eaque provident accusantium. Assumenda quia exercitationem. Error quibusdam officiis. Deserunt ipsum neque voluptas blanditiis ipsa consectetur commodi. Unde est non sit dolores tenetur officia atque. Tenetur debitis omnis. Necessitatibus quaerat quasi hic sit eum porro corrupti. Laudantium in ipsam pariatur. Harum et delectus ducimus quae quas accusantium doloremque fugit error. Maiores esse facilis quas porro ex quisquam ad. Eum est voluptates ex maxime nam fuga vitae accusamus. Maxime ex dolorum ullam nam quod cumque. Cupiditate fuga nam itaque cupiditate amet recusandae neque. Maiores atque culpa ratione officia placeat molestiae fuga velit tempora. Ut aspernatur quae dolores quasi reprehenderit magni dolorem eaque. Earum similique eius odit quae porro neque. Animi quis nobis amet magnam et fugit praesentium eum recusandae. Repudiandae debitis possimus harum. Magnam iure quis fugiat. Maiores quam nam in porro illo sapiente iure dolores labore. Ad deleniti quo alias placeat magnam voluptatibus voluptate occaecati. Nemo laudantium odio similique porro ad natus. Quidem nesciunt quisquam odit est aspernatur illum incidunt tempora.

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