Maxim 77c96acc4f refactor(saas-demo): migrate to Tailwind v4 and import v2 styles normally ...

Banking was on Tailwind v3, which made the pre-compiled v2 stylesheet
(`@copilotkit/react-core/v2/styles.css`, built as Tailwind v4 output)
incompatible with the PostCSS pipeline. A temporary inline-CSS hack in
`layout.tsx` worked around this. Migrate to Tailwind v4 to match the
canonical v2 demos and remove the hack.

- package.json: tailwindcss ^4, add @tailwindcss/postcss ^4, replace
  tailwindcss-animate with tw-animate-css (v4 drop-in)
- postcss.config.mjs: switch plugin to @tailwindcss/postcss
- globals.css: use @import "tailwindcss" + @import "tw-animate-css";
  add @custom-variant dark for the existing .dark/.light class toggle;
  move shadcn color/radius mapping into @theme inline (preserves
  bg-background/text-foreground/rounded-{lg,md,sm} semantics)
- tailwind.config.ts: deleted; theme now lives in CSS
- components.json: clear stale tailwind.config reference
- layout.tsx: drop the readFileSync/dangerouslySetInnerHTML inline-CSS
  workaround; import "@copilotkit/react-core/v2/styles.css" the normal
  way alongside ./globals.css

Verified: tsc clean, next build clean, Playwright-rendered all four
pages (/, /dashboard, /cards, /team) with computed-style checks
(sidebar bg-gray-900 dark, rounded-lg=8px, .border=1px) and opened
the copilot popup which renders fully styled with the v2 stylesheet.

2026-06-03 11:10:28 +02:00

405 B

Raw Permalink Blame History

View Raw