[v4] tailwindcss-forms plugin applies reset classes at incorrect layer

[chasegiunta]

What version of Tailwind CSS are you using?

v4.0.1

What build tool (or framework if it abstracts the build tool) are you using?

Vite / Vue

What version of Node.js are you using?

v20.18.2

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/5y73wPxEOR?file=css

Describe your issue

When using tailwindcss-forms class strategy (via @plugin directive), the reset classes are being applied at the utilities layer, rather than the base or components layer. This causes unreliability when trying to setup custom base form- classes, or override those styles on a case-by-case basis within markup. This didn't seem to be an issue on v3 (perhaps the reset classes were applied at the components layer?) so it might be considered a regression.

[philipp-spiess]

Hey! Yeah in v4 we don't separate between components specifically anymore that means that plugins like the @tailwindcss/forms will generate its classes in the utilities layer as well.

You can do what you're trying to do here by also adding your custom classes into the utilities layer: https://play.tailwindcss.com/IyNTWRmh8H?file=css

[chasegiunta]

@philipp-spiess Hey Philipp, yep, tried that. Unfortunately, they conflict with each other and there's no guaranteed ordering or precedence of utilities. The method of using @utility fails locally for me (hence, my comment in the CSS tab of the playground link I provided). Form resets were placed in the components layer before in v3 -- so this behavior is a regression.

[chasegiunta]

For further reference, there's an issue on the forms repo, but no activity really: tailwindlabs/tailwindcss-forms#162

[thepra]

Sorry, I did open a bug too for this, attaching it here:
#16254

[chasegiunta]

looks like this regression bug is being tracked here: #15045