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

1 messages · Page 1 of 1 (latest)

warped crow
#

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

And here is a minimal crop from my styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

[popover]:popover-open {
  @apply text-gray-800;
}
#

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

#

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
manic radish
warped crow
#

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?

manic radish
#

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

warped crow
#

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?

manic radish
#

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.

warped crow
#

Thanks!