tailwind-ecommerce
Installation
SKILL.md
Ecommerce UI with Tailwind CSS
Patterns for product display, cart, checkout, orders, and store navigation.
1. Product Display Patterns
Card Variants
| Variant | Key Classes | Use Case |
|---|---|---|
| Simple grid card | aspect-[3/4] w-full object-cover + text below image |
Category pages, minimal listings |
| Card with details | rounded-lg border bg-white shadow-sm + price, rating, badge |
Product listings, search results |
| Horizontal card | flex flex-row gap-4 + image left, details right |
Cart items, wishlists, comparisons |
| Quick view overlay | group relative + opacity-0 group-hover:opacity-100 overlay CTA |
Browse-and-add flows |
| Featured card | col-span-2 row-span-2 + larger image |
Homepage hero products |