ilpanich / axiam / 29309830048

85%

push

github

build(deps): migrate to Tailwind CSS v4 (#167)

Migrates the frontend from Tailwind CSS v3.4.19 to v4.3.2, performing the
config migration that the plain dependency bump (Dependabot #115) omitted and
which caused `vite build` to fail with:

  [postcss] It looks like you're trying to use tailwindcss directly as a
  PostCSS plugin. The PostCSS plugin has moved to a separate package...

Changes:
- Add @tailwindcss/postcss and switch the PostCSS config to it; drop the
  `tailwindcss` PostCSS plugin entry.
- Remove autoprefixer (v4 bundles vendor-prefixing) from deps and PostCSS
  config.
- Replace the v3 `@tailwind base/components/utilities` directives in
  src/index.css with `@import "tailwindcss";` and bridge the existing JS
  theme with `@config "../tailwind.config.js";` so the custom AXIAM theme
  (brand colours, radii, shadows, animations, keyframes) is preserved exactly.
- Pin the stock Tailwind palette families actually used by the UI (red,
  orange, amber, emerald, cyan, blue, purple, pink, rose) to their v3 values
  in tailwind.config.js. v4 ships a redesigned default palette; pinning keeps
  the rendered colours identical.
- Rename utilities whose scale/semantics changed in v4 to preserve appearance:
  `backdrop-blur-sm` -> `backdrop-blur-xs` (v4 `-sm` is now 8px; v3 `-sm` was
  4px), and `outline-none` -> `outline-hidden` (v4 `outline-none` is
  `outline-style:none`; the v3 accessible-transparent-outline behaviour is now
  `outline-hidden`).

Verified via a compiled-CSS diff of every utility class against the v3 build:
all classes render identically apart from four spots where v4 now honours
non-multiple-of-5 opacity utilities (border-white/8, border-white/12,
bg-amber-500/8) that v3 silently dropped.

Supersedes #115.

Co-authored-by: Claude <noreply@anthropic.com>

1603 of 1765 branches covered (90.82%)

Branch coverage included in aggregate %.

26533 of 33026 relevant lines covered (80.34%)

68.06 hits per line