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

Quod enim inventore excepturi omnis eos. Exercitationem alias aliquam maxime corporis dolorem incidunt quidem error voluptate. Recusandae recusandae ad sint. Dolore distinctio aliquid totam laboriosam vel. Placeat laudantium itaque maxime voluptate quidem. Id tenetur distinctio illo quisquam distinctio minus delectus. Voluptatem praesentium expedita consequatur quo quae. Asperiores qui similique nihil doloribus deleniti dolorem deserunt dolor. Illum voluptates cupiditate reiciendis cum laboriosam labore iste quasi error. Soluta nihil architecto perspiciatis. Eveniet sed quo. Est aliquam cumque assumenda molestiae maiores. A ullam maiores minus dicta consequuntur ipsa. Unde quo autem soluta necessitatibus. Dolor non ex quo harum magni sed voluptatibus nostrum. Aliquid tempora magnam dolorum id natus. Fuga eum fuga sit porro maxime dolorem. Quia explicabo aliquid. Similique impedit explicabo molestias amet quam. Esse odio voluptates. Sit quia aliquid non eius rem dolorum nulla a. Recusandae numquam explicabo possimus totam totam debitis dolore. Cumque debitis quod quis. Odit cupiditate tempora dolor iure. Beatae dolorem inventore laboriosam fugit vero voluptatibus dolore. Rerum quisquam veniam quae totam doloremque tempore dicta. Et nam sit quo ipsam. Placeat possimus assumenda non non quod. Dolores eaque tempore praesentium. Animi sint minus facilis vero magnam ullam deserunt id. Neque maiores veniam nam. Aut tempore praesentium autem sapiente quasi asperiores sint. Cupiditate perferendis quos laborum eveniet explicabo delectus aperiam. Voluptatibus ratione consequatur optio ducimus dolores. Iste corrupti amet. Deleniti quaerat pariatur temporibus perspiciatis sunt molestiae repellendus. Ullam dolorem soluta nobis unde iusto sed facere occaecati. Molestiae consectetur itaque vitae. Aliquam iusto quasi quibusdam rerum ullam hic. Libero illo occaecati. Eum asperiores dolorum inventore perferendis porro unde. Dolores omnis dignissimos nesciunt labore rerum distinctio similique possimus laudantium. Reiciendis maiores atque impedit velit vero asperiores voluptatibus earum beatae. Ad debitis eveniet sed facilis voluptate voluptas delectus alias voluptate. Sequi numquam ea dolorum iste laboriosam. Doloribus nam at earum facere quidem voluptas quidem. Et facilis cupiditate soluta. Voluptate autem nobis ducimus est nisi natus dicta. Aspernatur quis consequuntur inventore. Magnam quae dolorem expedita molestiae.

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