tailwind-ecommerce

Use when building ecommerce interfaces, product pages, shopping carts, checkout flows, order management, or store navigation with Tailwind CSS. Covers product cards, product lists, product detail pages, category filters, shopping cart, checkout forms, order summaries, order history, pricing displays, promo sections, reviews, ratings, store navigation, category previews, inventory badges, wishlist buttons, compare features.

インストールへ移動

リポジトリ: diegosouzapw/awesome-omni-skill
ソースの最終更新活動: 2026年2月28日 03:57
検出された SKILL.md の言語: 英語
スター: 50
フォーク: 19

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/diegosouzapw/awesome-omni-skill --skill tailwind-ecommerce

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

ファイルエクスプローラー

2 ファイル

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

Image Handling

Concern

Pattern

Classes

Aspect ratio

Fixed ratio container

aspect-square, ,

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

Image Handling

Concern

Pattern

Classes

Aspect ratio

Fixed ratio container

aspect-square, ,

Scenario	Pattern
Regular price	`<span class="text-lg font-semibold text-gray-900">$49.99</span>`
Sale price	Original: `line-through text-gray-500 text-sm` / Sale: `text-lg font-semibold text-red-600`
Price range	`From $29.99` with `text-sm text-gray-500` prefix
Currency symbol	Keep symbol adjacent, no wrapping: `whitespace-nowrap`

Element	Classes
Star icon (filled)	`size-4 text-yellow-400 fill-current`
Star icon (empty)	`size-4 text-gray-300 fill-current`
Half star	Clip filled star at 50% with `overflow-hidden w-2` wrapper
Review count	`text-sm text-gray-500 ml-1` next to stars
Container	`flex items-center gap-0.5`

Layout	Classes	When to Use
Grid (default)	`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6`	Category pages, search results
Two-column wide	`grid grid-cols-1 md:grid-cols-2 gap-8`	Featured products, comparisons
List view	`flex flex-col divide-y` with horizontal cards	Detail-heavy browsing
Masonry-style	`columns-2 lg:columns-3 gap-4`	Visual-heavy catalogs

Pattern	Implementation
Skeleton card	`animate-pulse` with `bg-gray-200 rounded` blocks matching card layout
Skeleton image	`aspect-[3/4] bg-gray-200 rounded-lg animate-pulse`
Skeleton text	`h-4 bg-gray-200 rounded w-3/4 animate-pulse`
Load more button	`w-full py-3 border rounded-lg text-center` below grid
Pagination	`flex items-center gap-2` with numbered buttons, active: `bg-indigo-600 text-white`
Infinite scroll	Intersection observer on sentinel div at grid end
Empty state	`text-center py-16` with icon, heading, and CTA

Element	Classes
Panel container	`w-64 shrink-0 hidden lg:block`
Filter group	`border-b py-4` with heading + options
Group heading	`font-medium text-sm text-gray-900 mb-3`
Checkbox + label	`flex items-center gap-2 text-sm text-gray-600`
Color swatch	`size-6 rounded-full border-2` + `ring-2 ring-offset-2 ring-indigo-500` when active
Price range	Two `input[type=number]` with `w-20` in a `flex gap-2 items-center` row
Apply button	`w-full mt-3 py-2 bg-indigo-600 text-white rounded-lg text-sm`

Element	Classes
Trigger button	`lg:hidden flex items-center gap-2 border rounded-lg px-4 py-2`
Backdrop	`fixed inset-0 bg-black/25 z-40`
Panel	`fixed inset-y-0 right-0 w-full max-w-sm bg-white z-50 overflow-y-auto`
Header	`flex items-center justify-between px-4 py-3 border-b`
Footer	`sticky bottom-0 bg-white border-t px-4 py-3` with Apply/Clear buttons

Element	Classes
Filter chip	`inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-sm`
Remove button	`size-4 text-gray-400 hover:text-gray-600` (X icon inside chip)
Clear all link	`text-sm text-indigo-600 hover:text-indigo-800`
Sort dropdown	`select` or custom dropdown, `text-sm border rounded-lg px-3 py-2`
Result count	`text-sm text-gray-500` (e.g., "128 products")
Filter count badge	`size-5 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center`

Section	Classes	Content
Cart list	`divide-y`	Cart item rows
Summary panel	`rounded-lg bg-gray-50 p-6 lg:w-80 lg:shrink-0`	Subtotal, shipping, tax, total
Summary row	`flex justify-between text-sm text-gray-600 py-2`	Label + amount
Total row	`flex justify-between text-base font-semibold text-gray-900 border-t pt-4 mt-4`	Total label + amount
Checkout CTA	`w-full mt-6 py-3 bg-indigo-600 text-white rounded-lg font-medium`	"Proceed to Checkout"
Continue shopping	`text-sm text-indigo-600 hover:text-indigo-800 mt-4 text-center block`	Link back

State	Pattern
Empty cart	`text-center py-16` with cart icon, "Your cart is empty" heading, shop CTA
Mini cart / drawer	`fixed inset-y-0 right-0 w-full max-w-md bg-white shadow-xl z-50`
Cart badge	`absolute -top-2 -right-2 size-5 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center`
Updating state	`opacity-50 pointer-events-none` on item row during async update

Step State	Classes
Completed	`size-8 rounded-full bg-indigo-600 text-white` with check icon
Current	`size-8 rounded-full border-2 border-indigo-600 text-indigo-600`
Upcoming	`size-8 rounded-full border-2 border-gray-300 text-gray-400`
Connector (done)	`h-0.5 w-full bg-indigo-600` between circles
Connector (pending)	`h-0.5 w-full bg-gray-300` between circles
Container	`flex items-center justify-between max-w-lg mx-auto mb-8`

Section	Structure
Two-column layout	`grid grid-cols-1 lg:grid-cols-5 gap-8` (3 cols form + 2 cols summary)
Field group	`space-y-4` container
Two-field row	`grid grid-cols-2 gap-4` (first/last name, city/zip)
Full-width field	`col-span-2` or standalone
Label	`block text-sm font-medium text-gray-700 mb-1`
Input	`w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500`
Error input	`border-red-500 focus:border-red-500 focus:ring-red-500`
Error message	`text-sm text-red-600 mt-1`

Element	Pattern
Card number	Full-width input with card icon right-aligned
Expiry + CVC	`grid grid-cols-2 gap-4` side by side
Card group	`rounded-lg border divide-y` wrapping all card fields as one visual unit
Saved cards	Radio group: `flex items-center gap-3 p-4 border rounded-lg` per card
Security note	`flex items-center gap-2 text-sm text-gray-500` with lock icon

Pattern	Implementation
Guest vs account	Toggle or tabs at top: `flex rounded-lg border` with two options
Order review	Summary card: item thumbnails, quantities, line totals in `bg-gray-50 rounded-lg p-6`
Place order CTA	`w-full py-3 bg-indigo-600 text-white rounded-lg font-medium text-lg`
Terms checkbox	`flex items-start gap-2` with checkbox and label text
Loading on submit	Button with `opacity-75 cursor-not-allowed` + spinner icon

Viewport	Pattern
Desktop	Standard `<table>` with columns: Order #, Date, Status, Total, Actions
Mobile	Stacked cards: `divide-y` with each order as a `flex flex-col gap-2 py-4` block
Table header	`text-left text-sm font-medium text-gray-500 pb-3 border-b`
Table cell	`py-4 text-sm text-gray-900`

Status	Classes
Pending	`bg-yellow-100 text-yellow-800 rounded-full px-2.5 py-0.5 text-xs font-medium`
Processing	`bg-blue-100 text-blue-800 rounded-full px-2.5 py-0.5 text-xs font-medium`
Shipped	`bg-indigo-100 text-indigo-800 rounded-full px-2.5 py-0.5 text-xs font-medium`
Delivered	`bg-green-100 text-green-800 rounded-full px-2.5 py-0.5 text-xs font-medium`
Cancelled	`bg-red-100 text-red-800 rounded-full px-2.5 py-0.5 text-xs font-medium`
Refunded	`bg-gray-100 text-gray-800 rounded-full px-2.5 py-0.5 text-xs font-medium`

Section	Pattern
Status timeline	Vertical: `relative pl-8 space-y-6` with `absolute left-0` circles and connecting line
Timeline dot (done)	`size-4 rounded-full bg-indigo-600`
Timeline dot (current)	`size-4 rounded-full border-2 border-indigo-600 bg-white`
Timeline line	`absolute left-2 top-4 bottom-0 w-0.5 bg-gray-200`
Items list	Horizontal cards with image, name, qty, price
Totals section	Same pattern as cart summary
Shipping address	`bg-gray-50 rounded-lg p-4` card
Invoice layout	`max-w-2xl mx-auto` with logo header, address block, items table, totals

Pattern	Implementation
Original + sale	`<span class="line-through text-gray-500 text-sm">$99.99</span> <span class="text-lg font-semibold text-red-600">$49.99</span>`
Save amount	`<span class="text-sm text-green-600 font-medium">Save $50.00 (50%)</span>`
Per-unit price	`<span class="text-xs text-gray-500">$2.50/oz</span>` below main price

Element	Classes
Trigger	`group` on nav item
Dropdown	`invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all absolute left-0 w-full bg-white shadow-lg border-t`
Inner grid	`grid grid-cols-4 gap-8 max-w-7xl mx-auto p-8`
Column heading	`font-medium text-sm text-gray-900 mb-3`
Column links	`space-y-2 text-sm text-gray-600`
Featured image	`rounded-lg overflow-hidden` in last column

Element	Classes
Category card	`group relative rounded-xl overflow-hidden`
Category image	`aspect-[4/3] w-full object-cover transition-transform group-hover:scale-105`
Category overlay	`absolute inset-0 bg-gradient-to-t from-black/60 to-transparent`
Category label	`absolute bottom-4 left-4 text-lg font-semibold text-white`
Breadcrumb nav	`flex items-center gap-2 text-sm text-gray-500`
Breadcrumb separator	`size-4 text-gray-400` (chevron icon)
Breadcrumb current	`text-gray-900 font-medium` (last item, no link)

Element	Classes
Card container	`rounded-xl border p-6 text-center`
Featured card	`border-indigo-600 ring-2 ring-indigo-600 relative` with "Popular" badge
Price	`text-4xl font-bold text-gray-900`
Period	`text-sm text-gray-500` (e.g., "/month")
Feature list	`space-y-3 text-sm text-gray-600` with check icons
CTA button	`w-full mt-6 py-2.5 rounded-lg font-medium`

Pattern	Classes
Full-width banner	`bg-indigo-600 text-white py-3 text-center text-sm font-medium`
Dismissable banner	Add `flex items-center justify-between px-4` with close button
Trust icons row	`grid grid-cols-2 md:grid-cols-4 gap-6 py-8 text-center`
Trust icon item	`flex flex-col items-center gap-2 text-sm text-gray-600` with icon above
Coupon input	`flex` with `flex-1 rounded-l-lg border px-3 py-2` input + `rounded-r-lg bg-gray-900 text-white px-4 py-2` button

Element	Classes
Header bar	`sticky top-0 z-30 bg-white border-b`
Inner layout	`flex items-center justify-between h-16 px-4 max-w-7xl mx-auto`
Logo	`shrink-0`
Search bar	`flex-1 max-w-lg mx-8 hidden md:block` with `rounded-full bg-gray-100 px-4 py-2`
Icon group	`flex items-center gap-4` for account, wishlist, cart icons
Cart icon + badge	`relative` button with `absolute -top-1.5 -right-1.5` badge

Element	Requirement	Implementation
Product image	Descriptive alt text	`alt="Red leather crossbody bag"` not `alt="product"`
Decorative image	Skip for screen readers	`alt=""` and `aria-hidden="true"`
Sale price	Announce was/now	`aria-label="Sale price $49.99, originally $99.99"` on container
Cart update	Announce change	`aria-live="polite"` region for "Item added" / "Cart updated" messages
Cart count badge	Announce count	`aria-label="Cart, 3 items"` on cart button
Quantity selector	Label buttons	`aria-label="Decrease quantity"` / `aria-label="Increase quantity"`
Star rating	Text alternative	`aria-label="4 out of 5 stars"` on rating container
Filter change	Announce results	`aria-live="polite"` on product count ("128 results")
Form errors	Link to field	`aria-describedby="email-error"` on input, matching `id` on error text
Checkout steps	Current step	`aria-current="step"` on active step indicator
Remove from cart	Confirm action	Identify item in label: `aria-label="Remove Red Bag from cart"`
Sort dropdown	Label purpose	`aria-label="Sort products by"` on select element
Color swatch	Name the color	`aria-label="Color: Navy Blue"` on swatch button
Dialog filters	Trap focus	`role="dialog"` + `aria-modal="true"` + focus trap on mobile filter panel

Mistake	Fix
Fixed pixel image heights	Use `aspect-*` utilities with `object-cover` for responsive images
Cart with no empty state	Always handle zero items with illustration and CTA
Price without `whitespace-nowrap`	Currency and amount should not wrap to separate lines
Filter panel always visible on mobile	Hide with `hidden lg:block`, use dialog for mobile
No loading state during cart updates	Show `opacity-50 pointer-events-none` or skeleton on async actions
Checkout form in single column	Use `grid grid-cols-2 gap-4` for name, city/zip, expiry/CVC pairs
Status badges with only color	Add text labels; color alone fails WCAG
Missing `aria-live` on cart	Cart count and summary changes must announce to screen readers
Mega menu not keyboard-navigable	Ensure focus management and Escape key closes the menu
Discount badge over product text	Position badge on image (`absolute top-2 left-2`), not over card text

tailwind-ecommerce

ソース情報

インストール方法

ソースファイルを確認

このリポジトリの他の Skills

このリポジトリの他の Skills

Ecommerce UI with Tailwind CSS

1. Product Display Patterns

Card Variants

Image Handling

Ecommerce UI with Tailwind CSS

1. Product Display Patterns

Card Variants

Image Handling

Price Display

Rating Display

2. Product List Layouts

Responsive Grid

Layout Patterns

Loading and Pagination

3. Category and Filtering

Sidebar Filter Panel (Desktop)

Mobile Filter (Slide-out Dialog)

Active Filters and Sorting

4. Shopping Cart

Cart Item Row

Cart Sections

Cart States

5. Checkout Flow

Progress Indicator

Form Layout

Payment Fields

Checkout Patterns

6. Order Management

Order History Table

Order Status Badges

Order Detail Page

7. Pricing and Promotions

Price Patterns

Discount Badge (on Product Image)

Pricing Tier Cards

Promo and Incentive Sections

8. Store Navigation

Store Header

Mega Menu

Category Previews and Breadcrumbs

9. Accessibility for Ecommerce

Common Mistakes

MCP Component Library