Frontend Style & Layout Patterns

Tailwind v4 styling patterns for this project. Covers page structure, spacing, responsive images, and v3→v4 migration.

1. Section Compound Pattern

Express page layout structure explicitly using semantic HTML + Tailwind classes at the usage site.

tsx
1// ✅ Layout structure visible at a glance
2const OrderListPage = () => (
3  <main className="min-h-screen flex flex-col">
4    <header className="sticky top-0 z-10 bg-white border-b border-gray-200">
5      <OrderListHeader />
6    </header>
7
8    <section className="flex-1 flex flex-col gap-4 px-4 py-6">
9      <OrderFilterBar />
10      <OrderList />
11    </section>
12
13    <footer className="sticky bottom-0 bg-white border-t border-gray-200 px-4 py-3">
14      <OrderListFooterActions />
15    </footer>
16  </main>
17)

What to Expose vs. Hide

• Reusable styles (buttons, cards) → abstract into components.
• Page layout → write directly at the usage site in screens/ pages.

2. Spacing Selection Guide

Three Methods

flex gap — Default for Flexbox containers:

tsx
1<div className="flex flex-col gap-4">
2  <OrderCard />
3  <OrderCard />
4</div>

space-y / space-x — Sibling elements with consistent spacing:

tsx
1<ul className="space-y-3">
2  <li>
3    <ReviewItem />
4  </li>
5  <li>
6    <ReviewItem />
7  </li>
8</ul>

Explicit spacer div — Single specific gap (e.g., from design spec):

tsx
1<div>
2  <OrderHeader />
3  <div className="h-8" /> {/* 32px explicit gap */}
4  <OrderContent />
5</div>

Decision Flow

Need spacing?
├── Inside Flexbox container?  → flex gap
├── Repeating sibling spacing? → space-y / space-x
├── Single explicit gap (from design spec)? → spacer div
└── Complex conditional spacing? → individual margin/padding

Notes

• Use gap inside flex containers to avoid margin collapsing.

3. Responsive Images — CLS Prevention

Use aspect-ratio + relative container to maintain original ratio responsively.

tsx
1// ✅ Basic responsive image
2const Illustration = () => (
3  <div className="flex justify-center">
4    <div className="relative w-full aspect-[327/200]">
5      <img
6        src="/illustrations/order-complete.png"
7        alt="Order complete"
8        className="object-contain w-full h-full"
9        loading="eager"
10      />
11    </div>
12  </div>
13)
14
15// ✅ With max-width constraint
16const Thumbnail = ({ src, alt }: { src: string; alt: string }) => (
17  <div className="relative w-full max-w-sm aspect-square">
18    <img src={src} alt={alt} className="object-cover w-full h-full rounded-lg" loading="lazy" />
19  </div>
20)

Key Properties

Loading Strategy

• loading="eager": Above-the-fold images (LCP optimization)
• loading="lazy": Below-the-fold images (initial load optimization)

4. Tailwind v4 Class Changes

This project uses Tailwind v4. Do NOT use v3 syntax.

Import Syntax

css
1/* ❌ v3 (forbidden) */
2@tailwind base;
3@tailwind components;
4@tailwind utilities;
5
6/* ✅ v4 */
7@import 'tailwindcss';

Class Migration Table

Reference: Tailwind v4 Upgrade Guide