Problem
Migrating a Deco Fresh storefront to TanStack Start typically involves upgrading from DaisyUI 3/4 + Tailwind 3 to DaisyUI 5 + Tailwind 4. Several CSS behaviors changed and cause visual regressions that are not caught by TypeScript or unit tests.
Known regressions
1. Border default is now black
In Tailwind 4, the border color default changed from transparent/gray to the current text color (effectively black). Any element with a border utility class that relied on the old default will show a black border.
Fix: add border-transparent or an explicit border color wherever a border utility is used without a color.
2. Badge and component backgrounds may disappear
DaisyUI 5 changed some component class mappings. Badges, alerts, and similar components may lose their background color if they relied on removed utility names.
Fix: audit all DaisyUI component usages in the migrated site and compare against DaisyUI 5 docs.
3. CSS animations not auto-migrated
Tailwind 3 animation utilities (animate-spin, animate-bounce, etc.) carry over, but any custom animations or keyframes defined via Tailwind config may not survive the migration to Tailwind 4 syntax.
Fix: manually port @Keyframes and custom animation classes from tailwind.config.js to the new CSS-native Tailwind 4 format.
4. Gray color scale shim needed
Tailwind 4 removed many named color aliases (gray-200, gray-400, etc.) or changed their values. Code using gray-* classes may lose styling silently.
Fix: add a shim in your CSS file mapping the old gray-* names to the new neutral-* equivalents, or update all usages.
Recommendation
After migration, do a full visual regression pass in the browser against the production Deco Fresh site before considering the migration complete. TypeScript will not catch these issues.
Problem
Migrating a Deco Fresh storefront to TanStack Start typically involves upgrading from DaisyUI 3/4 + Tailwind 3 to DaisyUI 5 + Tailwind 4. Several CSS behaviors changed and cause visual regressions that are not caught by TypeScript or unit tests.
Known regressions
1. Border default is now black
In Tailwind 4, the border color default changed from transparent/gray to the current text color (effectively black). Any element with a border utility class that relied on the old default will show a black border.
Fix: add border-transparent or an explicit border color wherever a border utility is used without a color.
2. Badge and component backgrounds may disappear
DaisyUI 5 changed some component class mappings. Badges, alerts, and similar components may lose their background color if they relied on removed utility names.
Fix: audit all DaisyUI component usages in the migrated site and compare against DaisyUI 5 docs.
3. CSS animations not auto-migrated
Tailwind 3 animation utilities (animate-spin, animate-bounce, etc.) carry over, but any custom animations or keyframes defined via Tailwind config may not survive the migration to Tailwind 4 syntax.
Fix: manually port @Keyframes and custom animation classes from tailwind.config.js to the new CSS-native Tailwind 4 format.
4. Gray color scale shim needed
Tailwind 4 removed many named color aliases (gray-200, gray-400, etc.) or changed their values. Code using gray-* classes may lose styling silently.
Fix: add a shim in your CSS file mapping the old gray-* names to the new neutral-* equivalents, or update all usages.
Recommendation
After migration, do a full visual regression pass in the browser against the production Deco Fresh site before considering the migration complete. TypeScript will not catch these issues.