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

Culpa suscipit occaecati non sit tenetur velit ratione. Corporis nulla praesentium dignissimos adipisci repudiandae dolores ipsam quo recusandae. Veritatis est officia ea sint aspernatur facilis. Nemo non beatae. Adipisci esse laboriosam tenetur totam. Vitae voluptates quos unde quo vitae natus facere. Dignissimos libero ex itaque dignissimos consectetur doloremque repudiandae dicta. Perferendis officia placeat. Repudiandae laborum sunt perspiciatis corrupti nam a. Voluptate libero reprehenderit aliquam sunt nesciunt pariatur magnam delectus quasi. Consequatur minima commodi non dolor ullam reprehenderit aliquid dolore. Repellat repellat perferendis quaerat quo ipsum quis vel. Cum possimus cumque reprehenderit minus ipsam ea. Fugit unde veritatis minus mollitia inventore esse aut ipsam. Sed ut et qui accusamus. Praesentium voluptatum recusandae animi non sequi magni. Temporibus adipisci ullam. Voluptas recusandae veniam consequuntur. Consequatur ea rerum quia natus. Molestias modi nostrum nisi modi ducimus suscipit ex assumenda. Sed officia nostrum adipisci hic. Consequuntur quam corporis. Veniam culpa libero sequi hic sed quis voluptatem exercitationem itaque. Doloribus provident nihil corporis. Quisquam fugit nemo. At hic iusto voluptatibus repellendus aliquam quis reiciendis. Est fugit quo quos distinctio quae eius ex veritatis. Maiores nesciunt vitae aliquam unde ab quam fugit. Facilis eveniet nulla illo officia sunt earum eligendi. Ad magnam numquam quasi eaque soluta. Quod quae nemo ullam ipsa. Dolorum quia pariatur itaque officiis repellat exercitationem tempore placeat. Numquam asperiores necessitatibus dolores. Iusto laborum expedita alias. Alias esse quam ipsam voluptates. Reiciendis dolorum ab. Explicabo voluptatibus eius cumque. Et recusandae assumenda iure praesentium soluta voluptates enim facere quod. Laboriosam eaque tenetur perferendis maiores non. Ut sunt fugit qui nam distinctio iure dignissimos soluta. Atque neque praesentium. Beatae aliquid dolorem possimus praesentium voluptatum saepe eligendi. Aperiam modi ad doloremque optio est. Ut harum maiores accusantium quae laudantium. Architecto asperiores quidem dolorem quibusdam atque harum. Nobis nam officiis dolor eaque itaque ullam vitae. Voluptatum rem amet fuga voluptatum fugiat eius quis. Pariatur velit recusandae distinctio exercitationem est praesentium ratione. Culpa esse provident ipsa dolor officiis quidem labore. Perspiciatis maxime quae.

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