Can't figure out if its a decision or overlook that buttons have [&_svg]:size-4 by default

[aawnu]

I don't understand why we force-size a svg in this way, I delete it in all my installs, but I started wondering if its there by design, by decision or just a mistake that never really got handled. Because it stops sizing icons with text. Perhaps size-fit is more appropriate, or perhaps size-[1em]?

[nicolasxbx]

I agree. It cost me precious time to find out why SVGs inside a Button-Element are not changeable in size. And I can imagine many people will come across this issue and be annoyed with it in the future, since the property is so hidden on the right side aswell.

[croftdynamics]

Second. It took me a while to figure out why icons in my buttons don't scale.

[jnatmorris]

Too unsure if this is an oversight or intentional, but I'd suggest it not be the default. Or there be some manner of overriding this elegantly.

Personally I just removed the class in the btn component.

[aawnu]

It's a shame no one ever updated the debate, so I just wanted to. I just saw that a fresh install has this instead:

[&_svg:not([class*='size-'])]:size-4

Well done.

[jlambert23]

I'm running into this same problem now and their update doesn't appear to solve other components attempting to change the svg size. e.g. I have a third-party component attempting to do:

<Button>
  <span className="[&_svg]:size-full">
    <svg />
  </span>
</Button>

I don't have direct access to the SVG (since it's used dynamically) so I'll probably just remove the class from Button.

As an aside, and I suppose this is more of a css question, but can someone explain to me why the classes on span don't win over the classes on Button here?

[aawnu]

Try and update the button (download it again, if you have not edited its content). Otherwise you can replace it with the small snippet i put above that listens for size- overwrite

[jlambert23]

Yeah, I have that specific class on my Button, but it conflicts when another element tries to overwrite the svg size — see my earlier example, assume the class from your snippet is applied to the Button element.

The issue is that the :not pseudo-class only matches size- classes directly on the svg itself. Since the size- class is being applied by a different element, the rule still passes, and that element can’t override the svg size.

See https://play.tailwindcss.com/u7tKQro3VV

---

It's not pretty, but to handle my specific case, I updated the original selector to target only direct svg children and added checks for parent classes that apply a size via [&>svg]:size-* or [&_svg]:size-*. It comes out like this (whitespace/newlines added for clarity):

[
  &>svg:not([class*='size-']),
  &_:not([class*='[&>svg]:size-']):not([class*='[&\\_svg]:size-'])>svg:not([class*='size-'])
]:size-4

https://play.tailwindcss.com/ouItQjPueu