TanStack migration: DaisyUI 5 + Tailwind 4 CSS regressions to watch for

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.

Start by reviewing the migrated site's tailwind.config.js and CSS file, then compare DaisyUI 5 and Tailwind 4 usage against the production Deco Fresh site in a browser. Audit border utilities, component backgrounds, custom animations and gray-* classes; done means the visual regression pass finds no migration-related differences.