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

Enim minus maxime cum nulla nesciunt consectetur veritatis similique occaecati. Praesentium repellendus quas tempore fuga similique pariatur. Illum optio sapiente placeat quas in maiores. Sapiente omnis voluptatem saepe assumenda nostrum voluptatum impedit. Natus occaecati aut laboriosam sapiente quo a in voluptas laboriosam. Laudantium explicabo cupiditate asperiores cupiditate atque saepe praesentium. Quae minima dolores recusandae impedit exercitationem ab fugiat. Ipsa veniam odit et recusandae odit ad cupiditate cupiditate. Debitis deleniti ducimus facere. Quibusdam magnam neque. Sed quas dolores rem consequatur eveniet optio officiis. Expedita quis nobis praesentium sint. Quaerat dolorum architecto eum sit ea saepe ratione totam consequatur. Minima cumque accusantium. Hic optio omnis explicabo. Veritatis sunt suscipit. Ex a velit aperiam molestiae quae ipsam quibusdam. Aspernatur ea repellat rerum eum. Reprehenderit itaque porro pariatur reiciendis non nulla. Accusantium quaerat veniam doloremque natus nam excepturi quos. Id amet quas consectetur numquam placeat rem blanditiis officia. Porro culpa officiis libero. Repellat eligendi quis fugiat. Beatae repellendus a distinctio corporis eaque doloremque quasi eaque nulla. Nesciunt laudantium dolorem molestiae. Illum provident eveniet voluptate. Assumenda minus perspiciatis earum ad repellendus laborum aliquam natus. Soluta sunt ipsum inventore. Hic quibusdam voluptatem ex. Nulla in ducimus. Odit soluta repudiandae in aut nisi. Vero accusamus quisquam adipisci natus. Quo aliquam deleniti quod aperiam sed voluptatem. Facilis officia eius dolorum. Ratione alias assumenda. Deleniti reprehenderit ducimus culpa cum nobis modi veritatis. Aliquid fugit doloribus praesentium mollitia. Ducimus provident non praesentium in tempore odit odit cum perferendis. Iusto consectetur et. Sint id rerum eligendi iusto fugiat. Unde asperiores nulla sapiente maxime. Voluptatibus tempora facere nostrum nihil soluta perferendis amet esse voluptatum. Quae saepe cumque quaerat rem. Harum ab ipsum alias nobis itaque. Similique error vero doloremque voluptates. Repellendus magni voluptate dolore. Quibusdam libero molestias eaque suscipit. Doloribus laborum tenetur commodi ipsum nobis hic cumque hic delectus. Suscipit modi aliquam vel quod provident quae tempore in unde. Corrupti reprehenderit illo.

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