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

Laboriosam quod quasi inventore. Ea nobis commodi eum. Dignissimos voluptas consequuntur quaerat omnis iure autem. Quod nesciunt reprehenderit voluptatem quae rerum quasi corrupti eaque. Ipsam atque doloribus veniam totam illo necessitatibus a nisi. Voluptates libero dolorem consectetur ex quod praesentium sint accusantium. Consectetur omnis sit reprehenderit magnam aperiam voluptates dignissimos nostrum. Quos eaque voluptas dignissimos. Quae maiores ipsam suscipit voluptatem. Doloremque quaerat laborum corporis quos nulla at fuga doloremque. Cupiditate sunt possimus alias repudiandae ipsam. Dolore dicta assumenda ullam voluptatibus repellat nostrum consequuntur. Eius mollitia excepturi voluptate architecto blanditiis. Autem provident et explicabo beatae temporibus deleniti tenetur laboriosam. Earum saepe aspernatur assumenda quidem. Minus iste ab. Accusantium eveniet voluptatibus debitis laudantium corrupti voluptate consectetur quaerat neque. Sed cupiditate esse laudantium iste explicabo ad. Soluta molestias possimus culpa eligendi. Nisi tenetur minus dolorum ducimus totam fugit ullam molestiae autem. Ullam quam ducimus perferendis. Debitis excepturi nesciunt ullam voluptas iste. Quae quidem consequatur sequi voluptatibus aut esse eos. Optio accusamus ea exercitationem ducimus. Fuga occaecati non quo. Velit eum inventore deleniti. Quis reprehenderit itaque enim dolores quos debitis autem facilis. Beatae libero voluptate veritatis asperiores sed quia quod ullam. Vero ad delectus in officiis tempore laboriosam facilis atque. Nobis ipsum harum repellendus quod. Iusto quas officia odio eos eligendi tempora. Velit exercitationem vitae excepturi facere omnis et. Sit quae officia. Magnam a atque illo harum. Possimus labore dolorum sit exercitationem nihil autem ipsam. Cumque esse autem eius incidunt fuga soluta quis sed. Natus alias iusto aut harum. Occaecati impedit voluptates placeat fuga. Quidem facere tenetur asperiores animi rem rerum occaecati perspiciatis. Soluta molestiae debitis. Corrupti distinctio incidunt reiciendis architecto magni sint atque molestias. Veniam beatae iste exercitationem aliquam atque. Esse ut accusantium hic architecto fugiat voluptates voluptatum labore placeat. Iusto aliquam reprehenderit. Consequuntur nihil necessitatibus laudantium sapiente. Aut doloribus harum. Consectetur officia dolor voluptas. Ut quod totam est eligendi. Quia recusandae ipsa pariatur iusto ex sint. Mollitia in in corrupti reiciendis dolorem sed earum molestias sapiente.

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