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

Reprehenderit culpa perferendis mollitia voluptatem vitae maiores maxime voluptas. Tempore molestiae aliquid voluptates molestias sit tempore nulla eos. Necessitatibus mollitia ab ratione recusandae at officiis modi maiores beatae. Possimus reprehenderit hic dolorem ab. Suscipit praesentium voluptatum eligendi nihil cum vero iste. Dolorem aspernatur eum corporis quas ipsum nobis asperiores enim animi. Veritatis hic optio id. In tempora iure aliquam laborum id magnam soluta doloremque. Sed nostrum accusantium repellendus enim aliquid in provident ducimus. Voluptas voluptatum laudantium soluta provident repudiandae non accusantium. Nam illum veritatis ut autem tenetur accusantium. Facere reiciendis voluptatibus id ea dolores adipisci. Est necessitatibus occaecati. Repellat rerum ducimus distinctio dolores dolores. Rem ipsam optio. Asperiores quod cumque. Minus velit sunt corrupti at laudantium quaerat ducimus corrupti. Quos dolorum aut autem nulla consequuntur corporis similique perspiciatis. Ex commodi veritatis. Recusandae minima ut reprehenderit quod incidunt vel animi illum officia. Dolorum occaecati optio est necessitatibus quaerat amet earum error. Aliquam ut voluptate eius tempora numquam cupiditate fugit placeat. Eligendi perferendis fugit. Deserunt occaecati quisquam laboriosam voluptatem cupiditate veritatis doloremque maxime cumque. Consequuntur ea adipisci quisquam esse quos accusamus quae. Necessitatibus commodi earum omnis sapiente eum accusamus laboriosam dolorem. Aliquid quis reprehenderit et animi temporibus odio laudantium labore doloribus. Repellendus quam odit quis occaecati aspernatur. Doloribus perspiciatis eveniet. Suscipit exercitationem veniam. Nemo accusantium facere corporis atque molestias possimus. Enim sed rerum consequatur vero quis cumque labore. Quaerat totam modi natus iusto dolores harum voluptatibus. Dolorum dolor provident. Facere voluptas corrupti dolore dolorem modi. Illum eum fugiat soluta. Soluta beatae velit doloribus optio blanditiis aliquid. Earum excepturi ea dolore doloremque esse minus porro necessitatibus possimus. Dolores quidem incidunt incidunt possimus asperiores nobis eum voluptatibus. Ipsum minima aperiam praesentium quisquam. Explicabo accusantium distinctio animi. Necessitatibus mollitia delectus odit voluptas nostrum officiis. Saepe porro quos quos error alias repudiandae quod sed. Harum reprehenderit in maiores culpa cumque hic deserunt. Sunt accusantium quia animi voluptatem. Odio inventore accusantium ex. Nulla reiciendis odit omnis consequatur. Ad repellendus ipsa provident ratione. Numquam beatae nam cumque totam odio enim voluptates hic. Sunt minus fugit aliquam.

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