[v4] Upgraded to V4 with vite plugin, tailwindcss forms breaks compilation

[DVG]

I've migrated my config file to a vite entrypoint css like so:

@import "tailwindcss";
 
@theme {
// omitted
}

@plugin "@tailwindcss/forms";

Whenever I add the plugin directive to import the forms plugin, vite immediately breaks

[plugin:vite:css] [postcss] /app/app/javascript/entrypoints/tailwind.css:5509:19: Unclosed string

I've been looking high and low but I can't find any reference to the forms plugin at all in the official docs anymore, not even a note about deprecation or migrating existing forms.

[wongjn]

Please consider providing an example that reproduces the unexpected behavior.

[dbaltor]

We can read in your log the string [postcss].
As you can read on the instructions here, when using tailwindcss v4 with vite, you're not supposed to use postcss.

After following the instructions in the page above to installing tailwindcss v4 with vite, I managed to use tailwindcss forms by just doing the following:

1. run npm i -D @tailwindcss/forms
2. add to your css file the following line (as you did)
   @plugin "@tailwindcss/forms";

Here is the beginning of my index.css:

@import "tailwindcss";
@plugin "@tailwindcss/forms";

// omitted

[aperezg97]

This worked for me, using "tailwindcss": "^4.0.6", "vite": "^6.2.2" and "react": "^19.0.0". I couldn't find how to use the forms plugins on tailwind docs, thanks for sharing this.