How do I fix "Cannot apply unknown utility class" with Svelte and Tailwind?
Oct 29,
posted by Jeffry Houser
I'm working on a Svelte app that uses Tailwind. I recently upgraded from Tailwind 3 to 4, and was getting this error:
Cannot apply unknown utility class text-blue-200. Are you using CSS modules or similar and missing @reference? https://tailwindcss.com/docs/functions-and-directives#reference-directive
It took a while to find the source, but the app had a Svelte, whose CSS imported a CSS File, like this:
2 @import '../my-shared.css';
3</style>
And that file used the @apply directive, like this:
2 @apply text-blue-200;
3}
The info from the error, about setting up references did not help.
Off to my trusty AI tools, which told me the issue was a mix of Tailwind 3 and 4 configurations, and kept downleveling the project back to Tailwind 3, which left me in a really weird state.
All I had to do was:
At the top of the shared CSS file. And all my problems went away.
posted by Jeffry Houser in
Tailwind, Svelte
| 0 Comments
