Tailwind v4 integration

[kentcdodds]

Summary

Upgrades the project to Tailwind CSS v4, removing postcss and tailwind.config.ts in favor of the new @tailwindcss/vite plugin and CSS-only configuration.

Key changes include:

• Integration of @tailwindcss/vite plugin.
• Migration of Tailwind theme tokens, animations, and container utilities into app/styles/tailwind.css using @theme and @utility directives.
• components.json updated to point shadcn to the CSS-only config.
• Custom color and typography tokens retained in app/utils/extended-theme.ts for tailwind-merge.

Test Plan

1. Verify UI: Visually inspect the application to ensure all Tailwind styles are applied correctly. A video walkthrough and screenshots are provided below.
2. Build Process: Run npm run build to confirm the production build pipeline functions as expected with the new Tailwind setup. (Log attached)

Checklist

• Tests updated
• Docs updated

Screenshots

Homepage renders with Tailwind v4 styles.

Build Log:
npm run build output: /opt/cursor/artifacts/npm-run-build.log

---

 

---

Note

Medium Risk
Build/styling pipeline changes (Tailwind major version + new Vite integration) can cause widespread visual regressions or missing utilities if any tokens/plugins were not migrated correctly.

Overview
Upgrades the app to Tailwind CSS v4 by switching from a PostCSS + tailwind.config.ts setup to the @tailwindcss/vite plugin.

Theme configuration is migrated into app/styles/tailwind.css (CSS variables, @theme tokens for colors/typography/animations, custom container utility, and a dark variant), and the old marketing preset/config files are removed.

Dependencies are updated accordingly (add @tailwindcss/vite and tw-animate-css, bump tailwindcss/tailwind-merge, remove legacy Tailwind/PostCSS-related packages) and components.json is adjusted for shadcn to use CSS-only config.

^{Written by Cursor Bugbot for commit 3dce529. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[cursor]

Bugbot Autofix resolved 2 of the 2 bugs found in the latest run.

• ✅ Fixed: Container max-width triggers at wrong breakpoint
  • Changed container media query from 1400px to 1536px to match original Tailwind v3 2xl breakpoint behavior.
• ✅ Fixed: Unused borderColor property in extendedTheme
  • Removed the unused borderColor property which is no longer referenced after tailwind.config.ts deletion.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is ON. A Cloud Agent has been kicked off to fix the reported issue.}

[cursor]

Bugbot Autofix resolved the bug found in the latest run.

• ✅ Fixed: Unused marketing animation definitions migrated to CSS
  • Removed the three unused marketing animations (roll-reveal, slide-left, slide-top) and their @Keyframes definitions, keeping only the caret-blink animation that is actually used in input-otp.tsx.