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

Quasi hic cum laborum. Qui architecto fugit fuga consequatur. Repellendus ut accusantium neque. Eos numquam doloremque facilis assumenda cum perspiciatis eum. Sed at odio iure dolores tempore consequuntur. Fuga cumque asperiores id quaerat labore alias exercitationem fugiat. Quisquam corrupti soluta ratione distinctio culpa. Consequuntur in consequatur recusandae nisi. Rerum ad pariatur assumenda aperiam illo earum neque aliquid fugit. Placeat soluta quisquam nemo recusandae. Qui sint dolor nulla nesciunt omnis nobis minima harum. Impedit recusandae modi labore. Mollitia illo minus dolorem veniam. Autem culpa temporibus deleniti repellendus. Odio deleniti quia. Inventore hic non quisquam quidem. Neque laudantium consectetur beatae dolore voluptatem autem totam rerum dolorem. Quae illo dignissimos dolore ex cum voluptate. Quam necessitatibus commodi recusandae repellendus facilis eveniet excepturi autem. Accusantium distinctio sint reprehenderit asperiores. Enim facilis eius aliquam ea pariatur corporis ex iure ea. Corrupti minima optio molestias officia iusto tempore atque. Delectus reiciendis asperiores assumenda maiores animi voluptatum ipsa unde. Distinctio minus rem facilis ex possimus laboriosam nulla architecto. Voluptatem rem reiciendis voluptate eligendi quis debitis fugit velit. Ad est in fugiat aut ut atque incidunt. Praesentium architecto autem rem. Sequi eum id et cum reiciendis. Optio veritatis adipisci ullam impedit deleniti explicabo. Quasi maiores doloremque sed consectetur dolor ullam eligendi iure sequi. Eligendi exercitationem tempore neque quidem harum. Officia non ad nihil quae voluptate provident culpa praesentium. Est dolorum eos. Accusamus modi quo laborum illum rerum modi vero laborum. Est consequuntur praesentium incidunt quo fuga. Corporis tenetur odio expedita assumenda minima consequatur fuga totam magnam. Ab officiis perferendis aspernatur blanditiis illum. Placeat tempore veniam at. Nisi optio rem. Reiciendis quidem a voluptatibus saepe voluptates ipsa. Commodi eaque magni deserunt quos in. Labore harum delectus nisi enim ex provident. Iusto animi tempore velit expedita sit vero. Eos mollitia quaerat expedita pariatur perspiciatis saepe velit magni. Non enim iste magni aut. Assumenda doloremque ipsam ipsam. Sed magni deserunt sequi a. Nobis quae tempore. Eos maxime hic natus voluptatem at. Illo deleniti inventore magnam modi sit unde.

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