vicary
vicary7h ago

[Fresh 2] tailwind-plugin does not recognize @apply utility classes

I am migrating from Fresh 1 to Fresh 2. Simply moving my stylesheet from ./static/styles.css to ./assets/style.css and importing it in client.ts crashes the vite dev server with the following excerpt.
[vite] (client) Pre-transform error: Cannot apply unknown utility class `text-gray-800`. Are you using CSS modules or similar and missing `@reference`? https://tailwindcss.com/docs/functions-and-directives#reference-directive
Plugin: @tailwindcss/vite:generate:serve
File: ./assets/styles.css
[vite] (client) Pre-transform error: Cannot apply unknown utility class `text-gray-800`. Are you using CSS modules or similar and missing `@reference`? https://tailwindcss.com/docs/functions-and-directives#reference-directive
Plugin: @tailwindcss/vite:generate:serve
File: ./assets/styles.css
And here is a minimal crop from my styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

[popover]:popover-open {
@apply text-gray-800;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

[popover]:popover-open {
@apply text-gray-800;
}
7 Replies
vicary
vicaryOP6h ago
Following the docs of Tailwind v4, adding @reference "tailwindcss"; only leads to a module not found error.
[vite] Internal server error: Can't resolve 'tailwindcss' in './assets'
Plugin: @tailwindcss/vite:generate:serve
File: ./assets/styles.css
[vite] Internal server error: Can't resolve 'tailwindcss' in './assets'
Plugin: @tailwindcss/vite:generate:serve
File: ./assets/styles.css
vicary
vicaryOP6h ago
Following this guide, replacing @tailwind with @import "tailwindcss"; doesn't resolve the module 'tailwindcss' either. Is there Fresh 2 deploy templates with @apply or @import "tailwindcss"; for reference?
marvinh.
marvinh.6h ago
yes, when you create a new fresh project and pick the tailwind option in the wizard you get a new project that's set up correctly
vicary
vicaryOP6h ago
I would want to avoid starting from scratch until I really have to, are these templates hosted in GitHub or JSR where I can take a look first?
marvinh.
marvinh.6h ago
I didn't say you should start from scratch. I just said that the template generated by @fresh/init does all the things you're looking for. The code for the template that's generated is all here https://github.com/denoland/fresh/blob/main/packages/init/src/init.ts
vicary
vicaryOP5h ago
Thanks! Looking at L351 there is only @import "tailwindcss@^4.1.10"; and nothing else, turns out I have to manually upgrade tailwind from v3 to v4 in my deno.json to have it properly resolve.

Did you find this page helpful?