vicary•4w 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

vicaryOP•4w 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

marvinh.•4w ago

see here: https://tailwindcss.com/docs/upgrade-guide#removed-tailwind-directives

vicaryOP•4w 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.•4w 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

vicaryOP•4w 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.•4w 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

vicaryOP•3w 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.

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

Did you find this page helpful?