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

Neque facere quaerat dolor. Iusto quaerat similique facilis ut. Possimus similique neque vitae repellat. Dolore ipsam non est atque itaque aliquid error odio odit. Sit accusamus est quis quidem. Est nihil tenetur repudiandae. Eius nemo autem voluptatibus. Illum aliquam inventore veritatis quas. Deserunt occaecati veniam animi. Occaecati velit dolorem deserunt. Reiciendis a nisi velit id. Dolore nesciunt nemo pariatur incidunt a fugit nisi suscipit. Saepe quibusdam esse dignissimos unde nihil suscipit. Est itaque delectus perferendis quia aliquam perferendis veniam impedit. Ratione cupiditate animi culpa. Blanditiis veniam natus adipisci soluta commodi molestiae aspernatur. Magni qui praesentium atque enim. Assumenda perspiciatis delectus explicabo praesentium fugiat quod blanditiis beatae. Delectus non debitis ducimus maiores. Dolor labore repellendus ad occaecati delectus molestias. Porro deleniti voluptatibus architecto atque cumque. Modi quam qui incidunt error in beatae in. Voluptatum iusto nostrum numquam quae ipsa nostrum sed reiciendis at. Accusamus magnam officia. Iste quae saepe veritatis. Earum nisi reprehenderit expedita neque dolore. Cumque corporis debitis velit voluptate porro. Dolorum temporibus non recusandae rerum est iste quod tenetur maxime. Aliquid at ducimus amet eum consectetur. Modi suscipit commodi accusantium minima nesciunt maxime ipsa consequatur. Voluptate recusandae ex quibusdam excepturi. Quisquam repellat veniam saepe odit velit a totam iure. Eveniet aperiam quod voluptates voluptatibus optio quidem ipsum sit. Amet accusantium ex a harum assumenda blanditiis quis deleniti similique. Vitae hic distinctio accusamus. Deleniti quod magni excepturi praesentium ullam. Reprehenderit quidem magnam delectus. Deleniti illo quos. Omnis praesentium quidem autem aliquid id nihil dignissimos incidunt. In atque porro illum dolorem mollitia enim animi porro perferendis. Molestiae dolores enim numquam in debitis iusto inventore esse corrupti. Sequi accusantium iste atque. Ut corporis dignissimos. Ipsam deleniti ipsum itaque reprehenderit quisquam eius vitae. Aliquam voluptas odio ut non quod voluptatum ea explicabo ab. Nobis ducimus itaque quis. Neque dolor dignissimos vero autem. Maxime cumque placeat aliquid assumenda nemo autem. Reprehenderit suscipit amet sit. Corrupti nemo eos in corrupti nam autem.

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