Migrated from CRA to Vite, Tailwind CSS error: "Cannot apply unknown utility class: sm:text-lg"

[weeeellllll]

Hi everyone, I recently migrated my project from Create React App (CRA) to Vite, and I’m running into an issue with Tailwind CSS. After making all the changes for the migration, I’m getting the following error:
Error: Cannot apply unknown utility class: sm:text-lg
The error seems to originate from my custom CSS classes where I’m using @apply to compose Tailwind utilities. Here’s the relevant code:

.btn-secondary {
  @apply bg-white text-primary px-4 py-2 rounded-md border-2 border-primary
         hover:bg-primary-light transition-colors focus:outline-none 
         focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:opacity-50 
         disabled:cursor-not-allowed text-base sm:text-lg font-medium;
}

@layer components {
  .btn-primary {
    @apply text-white px-4 py-2 rounded-md
           transition-colors focus:outline-none focus:ring-2 focus:ring-primary 
           focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed
           text-base sm:text-lg font-medium;
    background-color: var(--color-primary);
  }
}

Tailwind no longer recognizes utility classes (especially responsive ones like sm:text-lg), and I can’t run my project properly. If I remove @apply and write pure CSS instead, the error goes away, but I lose all the benefits of Tailwind, and it messes up my project’s styling. I’m new to front-end development, so feel free to point out anything obvious I might have missed—any help is appreciated!
Here’s what I’ve tried so far:
Migrated the project to Vite following the official guide.

Set up Tailwind as per the Tailwind CSS Vite guide.

How can I fix this issue and get Tailwind working properly with Vite?

Remember, when I used CRA all this worked perfectly

[wongjn]

Does this CSS file have @import "tailwindcss";? If not, you may need to use the @reference directive.

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890404835888910467

[weeeellllll]

Thanks for the reply!

Yes, my main CSS file does include the standard Tailwind directives:
@tailwind base; @tailwind components; @tailwind utilities;
The issue with @apply not recognizing utility classes (especially responsive ones like sm:text-lg and even basic ones like px-4 within the @apply block) persists even with these directives in place. This problem started specifically after migrating the project from Create React App (CRA) to Vite.

So far, we've tried:

Ensuring tailwind.config.js includes .css files in the content array.
Verifying postcss.config.js uses {'@tailwindcss/postcss': {}, 'autoprefixer': {}}.
Removing a duplicate tailwind.config.js from the src directory.
Reinstalling all dependencies, including explicitly adding tailwindcss, postcss, autoprefixer, and @tailwindcss/postcss as dev dependencies.
Temporarily simplifying vite.config.js (related to JSX handling in .js files) and reverting, confirming it wasn't the cause.
Trying tailwindcss: {} instead of '@tailwindcss/postcss': {} in postcss.config.js (which caused a PostCSS error, confirming '@tailwindcss/postcss': {} is correct for my setup).
I understand the general recommendation to avoid @apply, but I'd like to understand why it's breaking specifically in this Vite context after working fine in CRA, before deciding on a full refactor.

Are there any known interactions or specific configurations within Vite or its PostCSS integration that might cause @apply to fail like this, particularly with responsive modifiers or when processing CSS files included via index.js?

Thanks again for any insights!

[wongjn]

It seems like you upgraded the Tailwind package to v4 alongside migrating to Vite. This would mean you have a mix of v3 and v4 code/configuration. I would suggest integrating the same Tailwind version as your previous CRA project (presumably v3) with Vite, and only once that is verified as working, then upgrade to v4 (if you want to upgrade at all) using the automatic upgrade tool to get you started.

[weeeellllll]

my version was "tailwindcss": "^4.0.8" before migrating to Vite this shouldn't be the problem, right?

[wongjn]

Yes, it would be a problem. The @tailwind base; @tailwind components; @tailwind utilities; statements in your source CSS file are incorrect - it would be @import "tailwindcss"; for v4, hence causing the "Cannot apply unknown utility class" error.