search

tailwindlabs / tailwindcss-forms

A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
https://tailwindcss-forms.vercel.app
MIT License
4.15k stars 219 forks source link

Overridable class strategy #162

Open midnight-wonderer opened 3 weeks ago

midnight-wonderer commented 3 weeks ago

What version of @tailwindcss/forms are you using?

v0.5.7

Describe your issue

I read the discussion https://github.com/tailwindlabs/tailwindcss-forms/issues/22. The thread has been closed by adding class strategy.

Sorry to bring this up again

However, the class strategy is not easily overridable because it was placed later in the CSS file (at the components layer). No matter the strategy used, tailwindcss-forms should always be a base, ready to be overridden by other stylings.

Why the need for overrides?

I can't talk for others, as you'll see some of them on the discussion links above, but for me, tailwindcss-forms adds colors that almost always need overriding because they stand out like sore thumbs.

What should we do?

Can we move CSS declarations of class strategy from components layer to base layer? Basically, modify the code here: https://github.com/tailwindlabs/tailwindcss-forms/blob/c9d9da3e010b194a1f0e9c36fbd98c83e4762840/src/index.js#L353 from addComponents to addBase.

Why do I, or other similar people, use tailwindcss-forms at all?

tailwindcss has its ecosystem, and some 3rd-party components expect tailwindcss-forms to be there as the base. We still want to work with tailwindcss-forms and the people creating those components, even if we are not a fan of the approaches.

adamwathan commented 3 weeks ago

Can you give a concrete example of something that doesn't work? Are you trying to override the form styles with custom styles that you are putting in the base layer?

midnight-wonderer commented 3 weeks ago

Can you give a concrete example of something that doesn't work? Are you trying to override the form styles with custom styles that you are putting in the base layer?

Yep, that's pretty much it. I am customizing the base style of tailwindcss-forms like this:

@layer base {
  .form-checkbox:focus, .form-radio:focus {
    --tw-ring-color: transparent;
  }
}

It needs to be at the base layer because, well, it is the base style.

adamwathan commented 3 weeks ago

Those classes are in the components layer so why not use @layer components? When using the class strategy I don't consider them base styles because they aren't applied by default, you have to opt-in to them by adding a class.

midnight-wonderer commented 3 weeks ago

I guess that's work, too; apology for the fuss.
I kind of want to leave some room because of the unseen (future), but this is probably YAGNI stuff.

Nevertheless, all strategies at the base layer have advantages in some aspects. Their consistency makes the overriding layer agnostic to the strategies used. This makes it easier to share snippets in certain situations.

That said, the advantage is likely marginal; thanks for the swift replies.