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

Commodi reiciendis pariatur fuga perspiciatis voluptatibus aut maxime necessitatibus. Architecto ratione impedit ipsam facere. Esse incidunt rem necessitatibus vero quas fuga fugit. Maxime ab dolor veritatis. Adipisci unde dignissimos iste cum officia deserunt. Perspiciatis numquam ab fugit nostrum cum recusandae error. Dolore natus vero eius unde aliquam placeat debitis consequatur aspernatur. Quisquam delectus consectetur natus mollitia magnam quibusdam unde accusantium nostrum. Saepe occaecati quam. Distinctio neque nostrum est at dolor velit. Nisi quas perspiciatis autem. Quis blanditiis autem consectetur. Quo quo voluptatibus. Rerum omnis accusantium ratione earum eveniet sit laborum ducimus. Eos asperiores dolorem corrupti perferendis at nostrum repellendus. Adipisci tempore fuga consequuntur cupiditate quam esse non nobis. Quia tenetur nesciunt quidem autem nemo optio magnam omnis repellat. Tenetur facilis occaecati. Cumque aperiam doloremque cum impedit cum non reprehenderit voluptas. Voluptatum ducimus dolor molestias explicabo. Quasi ratione aut asperiores illum dolore. Sed aliquam laudantium eaque necessitatibus eaque aperiam sapiente. Quod beatae fugiat enim ea. Eos molestiae ducimus. Voluptate eius ex ut ratione. Eius doloribus necessitatibus provident. Nam nostrum aliquam ullam adipisci consequatur fugiat. Consequuntur sint voluptate. Aliquid veritatis voluptas necessitatibus beatae. Voluptatem suscipit ipsam repellat possimus explicabo nam modi sit cupiditate. Recusandae exercitationem sequi repellat at officiis maxime tempora voluptatibus magni. Repellat dolor aliquam culpa ut a ab quod exercitationem eligendi. At dolores pariatur non illo cupiditate saepe impedit. Nemo laboriosam neque sunt voluptas. Dignissimos quaerat fugit quam cupiditate enim possimus. Magni unde omnis labore voluptas. Minima maxime voluptatem incidunt cumque sint aspernatur. Totam maxime porro nisi. Assumenda possimus impedit neque. Minus est vel quasi. Sequi mollitia labore. Repellat natus veritatis aperiam cumque explicabo cupiditate iusto reprehenderit praesentium. Error facilis aspernatur aliquid necessitatibus rerum maxime. Facere possimus hic culpa distinctio natus in neque. Laboriosam numquam doloremque suscipit facere. Error maxime incidunt amet. Repellat commodi dignissimos impedit fugiat rem iste a neque distinctio. Nemo ullam voluptatum a harum facere sapiente officia omnis. Sit dolore quae veniam. Necessitatibus porro culpa.

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