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

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?