Overridable class strategy

[midnight-wonderer]

What version of @tailwindcss/forms are you using?

v0.5.7

Describe your issue

I read the discussion #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:

tailwindcss-forms/src/index.js

Line 353 in c9d9da3

addComponents(getStrategyRules('class'))

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]

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]

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]

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]

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.

[ranseur92]

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.

Can you verify/check if this is the case in v4? as for me, they end up in the utilities layer. which makes changing the styles and allowing overrides not work.

@adamwathan