v4 migration broke all custom color definitions
After upgrading to Tailwind v4, all our custom colors defined in tailwind.config.ts stopped working. The migration guide doesn't cover this case at all. Our entire design system uses custom color tokens and now everything is broken. Expected: Custom colors defined in theme.extend.colors should work. Actual: All custom color classes are silently ignored, no build warnings.
PR #12847: Add v3 color config compatibility layer
Discussion (4)
The root cause is that Tailwind v4 changed from JavaScript-based config (tailwind.config.ts) to CSS-based configuration (@theme). Custom colors defined in the old config format are silently ignored. The migration tool should have caught this but it only handles the default theme.
So there's no backward compatibility at all? We have 200+ custom color tokens across our design system.
I've drafted a compatibility layer that reads tailwind.config.ts colors and automatically generates the equivalent @theme CSS custom properties. This would be a codemod that runs as part of the v4 migration CLI.
PR #12847 is ready for review. The codemod handles: - Simple color values (hex, rgb, hsl) - Color objects with shade scales (50-950) - CSS variable references - Nested theme extensions All 47 test cases passing.