Allow className for all components

Is your feature request related to a problem? Please describe.

I wish to customize & improve some of the primitive components like Checkbox or Label to have different look-and-feel. One common example is like the TextInput with sizing props to allow user to customize sizing at will. I curious why most components disallow to extend className ?

Describe the solution you’d like

Allow classname for all components.

Describe alternatives you’ve considered

Additional context

[leesiongchan]

But sometime we need to adjust its positioning, padding, margin, etc.? One example is like the below where I wish to align center & provide a little gap between.

<Label className="inline-flex gap-2 items-center">
  <Checkbox />
  Remember me
</div>

I understand there is another way to accomplish the same thing, but I believe there are more cases like this where we need className not only to customize its styling but also for us to adjust its positioning.

Or if I wish to have my button to be full width

<Button className="w-full">Hello World</Button>

[rluders]

I didn’t tested it. 😃 AFAIK, default Button style is w-fit, isn’t? It should have the parent size. If not, it is a bug.