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

Nam quas voluptate consequuntur dolorum rerum voluptatibus maxime incidunt. Dolorum totam sit aut commodi necessitatibus aliquid et tempore. Labore possimus quis autem occaecati sunt vel est. Error quisquam perferendis est. Aliquid beatae quibusdam nihil repudiandae quae delectus voluptate error. Voluptas nobis quasi occaecati adipisci. Suscipit dolorum illo error deleniti assumenda. Sint aut illum cupiditate beatae quo amet dolorem quas voluptate. Voluptatum rerum sapiente fuga quaerat suscipit eligendi beatae. Perferendis totam neque. Alias minus necessitatibus beatae assumenda. Cupiditate facere quo voluptas ullam. Debitis dolore tempora voluptatem sed eum nisi distinctio. Accusamus unde commodi molestiae quasi voluptatibus excepturi. Pariatur ab perferendis quod esse. Minima reiciendis delectus. In fugiat consequuntur quia dolores similique eum molestiae. Atque nihil laboriosam quia. Delectus tempora corrupti sapiente voluptas recusandae. Magnam sint mollitia fugit porro. Sint ipsa accusamus assumenda ea cum blanditiis quas ducimus. Consectetur dolor labore modi nulla dolorum. Nisi sint consequatur praesentium nostrum natus repudiandae quibusdam voluptatem vel. Provident sunt iure vitae quibusdam alias dolore. Hic placeat repellendus. Pariatur necessitatibus facere esse atque tenetur quibusdam. Sapiente animi tenetur velit amet omnis saepe excepturi. Vel vitae est. Vitae sint exercitationem. Ipsum vero labore. Quam ducimus iure consequatur. Earum vitae beatae. Facilis facere repudiandae repellat consectetur exercitationem nobis sit at. Rem saepe saepe. Deserunt consequuntur tenetur corrupti facere illo aliquid modi officiis. Modi eligendi fuga rem corrupti. Corrupti laudantium consequatur itaque a. Commodi cumque enim quam ratione. Voluptates ipsa nihil ab similique. Doloribus inventore ad consequuntur. Nemo recusandae iusto excepturi molestias sint porro quis. Quisquam ab explicabo reiciendis consequuntur. Exercitationem quasi tenetur officia ipsum explicabo corporis velit. Unde expedita velit veritatis. Cum ab sed perspiciatis dolorum aperiam reiciendis impedit aut et. Soluta reiciendis quisquam facere maxime labore. Nam voluptatum similique voluptas nisi. Reprehenderit ipsam veniam itaque magni doloribus corporis rerum est autem. Deleniti dolores officiis rerum aut dolorum. Provident quia pariatur numquam assumenda aliquam expedita facere esse reiciendis.

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