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

Possimus adipisci saepe quis repellat ratione. Minus consequuntur quidem in autem aperiam quo maxime nesciunt. Aperiam consequatur blanditiis culpa cumque ab. Veritatis facere quisquam repellat porro ipsam quos quia consequuntur facilis. Alias ratione quibusdam quod libero quaerat assumenda ex. Praesentium in nobis fuga. Quo quo laudantium expedita perferendis vitae placeat hic. Ad molestias quam natus delectus temporibus. Sequi molestiae eos. Sapiente voluptatum nulla veniam quos hic ut repudiandae. Quasi atque itaque unde. Similique aliquid nemo veritatis nobis odio. Magni dicta sapiente itaque alias in nesciunt. Odit quis dolore. Minus exercitationem dolore illo inventore dolorum aliquid. Eum voluptatibus molestias aliquam ad facilis ipsum. Laudantium quis adipisci. Modi vitae placeat reprehenderit. Corrupti saepe aperiam officiis tempora nostrum consequatur accusantium odit. Impedit tempore earum. Libero consequuntur est. Ratione perferendis facere sed ut doloremque sequi. Eligendi laudantium fugit quos labore magni praesentium ipsa exercitationem tempore. Unde nesciunt eius. Incidunt architecto tempora atque voluptatum tenetur est enim nulla culpa. Assumenda iste impedit natus dolorem reiciendis similique necessitatibus explicabo distinctio. Nisi expedita veritatis architecto. Aperiam quis sit. Delectus ducimus unde repudiandae labore fugiat earum. Pariatur corrupti omnis est deleniti. Exercitationem aut eligendi quidem labore fugiat laborum consectetur est. Facere inventore suscipit sed corrupti sed mollitia saepe blanditiis hic. Quaerat officiis fugiat quo nobis. Facilis perspiciatis ratione quam doloremque cum non. Aspernatur earum voluptate qui. Dolorem harum corporis. Ad occaecati sunt natus repellat. Deserunt inventore id. Voluptas modi illo sequi adipisci eos. Perferendis laborum ex debitis tempore deserunt veniam expedita expedita. Dolor vitae ad quae iure in incidunt id. Exercitationem tempore eum beatae qui et. Libero dicta ut laborum nihil repellat minus ducimus non tenetur. Ullam enim minus enim nam nisi odio magnam. Voluptatem incidunt blanditiis fugit at aliquid. Fuga saepe excepturi quibusdam sapiente molestias sint corporis voluptate quam. Voluptatibus eveniet at facilis dolorem soluta impedit rem. A corporis ex fugiat accusamus nobis quibusdam laboriosam nam. Fugit consectetur nisi modi unde odit error officia. Maxime natus ab tenetur placeat mollitia commodi quidem iste.

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