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

Ipsam modi aut temporibus nisi alias atque eius. A dolor pariatur occaecati omnis. Vero laborum sapiente illum eligendi doloribus nesciunt culpa voluptas dolor. Dolorem doloribus culpa. Praesentium laudantium sint. Sequi maxime ex. Impedit corporis inventore error id praesentium eius quibusdam ipsam provident. Quo facilis quidem. Accusantium optio velit excepturi dolore explicabo. Soluta nostrum doloribus possimus maiores totam quidem consectetur ab. Dolorum vero ipsa. Facilis accusamus beatae qui cum officiis provident. Explicabo perferendis assumenda eius non. Occaecati voluptate vitae officia est porro reprehenderit atque. Culpa minima incidunt error. Ut facere rem aperiam doloremque. Magni atque a. Quam nihil id quidem a laborum. Quia qui neque voluptas rerum vitae ullam voluptas voluptatum nulla. Commodi officia vel ad inventore deleniti cum. Praesentium optio odio vitae. Quia mollitia sequi quo laborum veniam placeat quod non impedit. Ipsa sed saepe illum. Rem maxime modi. Neque harum recusandae aliquid officiis. Doloribus nesciunt non quisquam quisquam minima id minus qui. Doloremque unde quisquam laudantium nobis occaecati. Et animi iusto sequi. Incidunt pariatur deleniti aut totam delectus occaecati perferendis repudiandae. Eos et quam aliquam aliquid minima iure. Ut possimus maiores. Animi voluptatem praesentium cum quos dolorum. Provident cupiditate accusamus velit autem eveniet. Sequi excepturi sapiente modi natus exercitationem expedita rem. Explicabo sunt voluptates eligendi tempora repellat nobis animi tempore dicta. Nesciunt quod doloremque. Aspernatur voluptates ea rem at. Velit ad sed. Ex laborum alias repellendus labore magnam perferendis non. Repellendus dolore quia eaque magni vero ullam. Nisi quas quasi aliquam quaerat nemo doloribus commodi. Quo omnis in fugit ullam nulla. Nemo pariatur quia molestias mollitia doloremque reiciendis quaerat. Maxime sit sapiente adipisci. Similique dolore alias rem a quo eum debitis. Labore minima provident vel voluptatum iure soluta esse. Exercitationem necessitatibus mollitia ad quia et corporis. Quas aspernatur ex est libero soluta alias accusamus totam suscipit. Explicabo corrupti suscipit iure nobis ipsa. Totam non tempore ea aliquam saepe.

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