vmall/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/proposal.md at 0d0e10b97bfb46be56f9763a69bf18de6ceed562

Files

T

Chengdong Zhang 0d0e10b97b feat(ui): adopt Tailwind v4 design system and archive change

- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin
- Add @vmall/shared/theme.css tokens with html[data-accent] presets
- Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage,
  VAccentSwatch, useAccent) as a Nuxt module
- Convert all three apps to kit + utilities; delete ui.css/mall.css and
  every <style scoped>; consoles get accent presets, mall locked to red
- Fix VCard boolean prop default (padding) and PDP/store stale
  useAsyncData keys on param navigation
- Archive adopt-tailwind-design-system; new frontend-ui capability spec

2026-09-22 18:22:50 +08:00

1.9 KiB

Raw Blame History

Why

Styling is split across ui.css, mall.css, and ~4k lines of Vue scoped CSS, with two palettes (mall red vs admin blue) and no shared primitives. Adopting Tailwind v4 plus one token/kit package lets us rewrite every surface, refresh visuals, and give consoles accent presets without a second CSS stack.

What Changes

BREAKING: Remove @vmall/shared/ui.css and apps/mall/assets/mall.css. Shared contract export becomes theme.css.
Add Tailwind v4 (@tailwindcss/vite) to mall, shop-admin, and platform admin.
Add @vmall/ui: Vue primitives (VBtn, VBadge, VField/VInput, VCard/VPanel, VTable, VPage) plus useAccent().
One design system: commerce red (#ca151e) default; same radius/type/spacing on all three apps.
Mall keeps classic PC chrome (1200px grid, dark nav, mega-menu, 450px home hero) with refreshed tokens.
Shop-admin and platform admin: accent presets red | blue | teal | violet, persisted in localStorage. Mall stays red with no switcher.
Delete all Vue <style scoped> in the three apps after conversion.

Capabilities

New Capabilities

frontend-ui: Shared Tailwind theme, UI kit, and console accent presets.

Modified Capabilities

frontend-mall: Storefront MUST use the shared design system; visual IA (1200px / #ca151e / hero / mega-menu) stays; no public accent switcher.
frontend-admin: Platform console MUST use the shared kit and expose accent presets.
frontend-shop-admin: Merchant console MUST use the shared kit and expose accent presets.

Impact

packages/shared (ui.css → theme.css), new packages/ui, three Nuxt apps (all SFCs), AGENTS.md / OpenSpec config (shared styles path). No API or money-handling changes. Three-app pnpm builds plus a mall visual pass.

Non-goals

Dark mode, free hex picker, per-shop customer-facing branding, theming the public mall, Element Plus, mixing this with the catalog-module split.

1.9 KiB Raw Blame History

Why