Upgrade to Tailwind v4 (include tw-animate-css). Change both globals.css and package.json. Upgrade the tailwind postcss plugin to @tailwindcss/postcss. Ensure globals.css contains shadcn :root, .dark, and @theme design tokens. Use those semantic design tokens throughout the generation, not hardcoded colors. Make any other changes as needed to migrate to Tailwind v4. Do NOT wrap :root, .dark, and @theme in "@layer base". If there are shadcn colors using just channel values, wrap them in hsl() for the new version in the :root and .dark sections (if the values are already wrapped in a color function, no need to wrap them again).
Now let me check the lib/utils.ts and scan for any hardcoded color references:
Now I have all the context. Let me perform the Tailwind v4 migration. I need to update: globals.css, package.json, postcss.config.js, and delete tailwind.config.js (config moves into CSS in v4).
Now delete tailwind.config.js since Tailwind v4 uses CSS-based config:
Migrated the project to Tailwind v4 by replacing the @tailwind directives and @layer base wrappers with @import "tailwindcss" and @import "tw-animate-css", converting all channel-value CSS variables (e.g. 0 0% 100%) to full hsl() calls, moving the theme configuration from tailwind.config.js into @theme inline in globals.css, switching PostCSS from tailwindcss to @tailwindcss/postcss, and upgrading Next.js, React, and related packages to compatible versions.
I've upgraded Next.js from 15.2.4 to 15.2.8.