Make tailwindcss/forms configurable

[helhum]

Currently there is no way to configure some of the opinionated styles provided by this plugin.
See #4645 for example.

Maybe it would be helpful to make some things configurable via the theming API like it was the case for tailwindcss/custom-forms or it is the case with tailwindcss/typography

WDYT?

[donatasben]

I totally second that. Would be no need to override the defaults with classes or custom CSS! One step less.

[aihrig]

Yes please - really messes with my style that I can't customize this.

[giltotherescue]

I'd like this too. Frustrating that I can't control the input focus color.

[stefanadelbert]

This is currently tripping me up at the moment too. It's great that the plugin provides some really sane default in a "form reset" way, but it seems crazy to have the power of tailwind for input elements and then not be able to customise something as obvious as the colour with hackery.
Are there any decent workarounds for this?

[adamwathan]

Hey all — the way you are supposed to customize the forms plugin is by just writing CSS, for example here's how I'd change the default focus color:

https://play.tailwindcss.com/wJXkrnwcp0?file=css

Don't be afraid to do this sort of thing in your CSS file instead of some special customization DSL — selecting elements and styling them is what CSS is good at, it doesn't make sense for us to reinvest the wheel there.

[stefanadelbert]

🙏 @adamwathan

Thanks for your example for changing the defaults. I confirm that it's working.

Is there a way for me to refence a tw colour, i.e.

@layer base {
  [type="text"]:focus {
    --tw-ring-color: red-400;
  }
}

[stefanadelbert]

Of course there is... See theme

e.g.

@layer base {
  [type="text"]:focus {
    --tw-ring-color: theme(colors.red.400);
  }
}