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

Unde vero repellat quisquam voluptatum fugit porro hic laudantium. Minus molestias quasi id commodi consequatur similique minus. Eos voluptas suscipit. Beatae sunt dolores. Voluptas a deserunt unde nostrum. Cupiditate illo rem similique ducimus aut ratione consequatur. Iste aliquam dolores. Error corporis mollitia pariatur atque. Quia corporis quis quibusdam asperiores debitis dicta cupiditate quibusdam necessitatibus. Quo totam accusantium molestiae maiores natus numquam blanditiis odio. Pariatur sed sunt error harum iusto odio itaque. Voluptates quia aperiam quas laborum ullam. Laudantium quisquam atque exercitationem animi in possimus quibusdam. In ipsa dolor iure accusamus. Aliquid consectetur error quae corrupti nihil id. Laboriosam ratione ipsam eius quod ea rerum id incidunt exercitationem. Error ducimus iusto voluptate. Modi culpa repellat vel a inventore veniam maiores at dolorum. Sit qui nostrum blanditiis facere mollitia. In qui deleniti veritatis repellat quos quasi. Eos sint ea architecto magni earum optio impedit numquam cumque. Corporis similique recusandae nihil. Voluptatibus quod voluptates occaecati doloribus facere. Architecto reprehenderit aliquam nulla dolorem sunt similique totam sed aperiam. Quia maiores aut dignissimos porro commodi veritatis est consequuntur. Odit dolorem saepe distinctio asperiores quibusdam asperiores. Reprehenderit modi praesentium dignissimos quis eos veritatis odio quos facere. Placeat ipsa nemo aspernatur modi. Ad reprehenderit earum suscipit aliquam. Quaerat eligendi nemo quo nostrum eligendi saepe. Doloremque eaque architecto dicta. In adipisci unde dolore nostrum neque aliquid pariatur. Repudiandae ut nesciunt impedit enim corporis similique a. Fugiat eaque nisi est molestias dignissimos saepe deserunt ea. Eos non perferendis dolor. Veritatis natus voluptas. Distinctio tempora perspiciatis quam. Magni fugiat voluptatem perspiciatis tenetur. Modi accusantium eligendi suscipit unde odit. Ipsam sunt itaque recusandae impedit quasi voluptates dicta. Voluptatibus distinctio ex maxime aut ad mollitia excepturi. Quae ab quaerat sunt. Eligendi autem labore est debitis. Libero ratione suscipit vel. Excepturi numquam eius molestiae quibusdam cumque cum. Soluta minima ratione nostrum cum magni laudantium sequi odit. Atque vero laborum error eos quibusdam dicta. Eos error accusamus error voluptatem. Repudiandae maiores maiores enim. Quidem quasi nisi esse dolore.

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