[Preflight] Replaced elements and display

[florianbouvot]

Hi @adamwathan,

Using display: block for svg doesn't seem ideal.
In this example, I think that the expected render is text and icon side by side (and not one above the other).

<a href="">
  Text link
  <svg class="...">...</svg>
</a>

Yes it can be solved adding inline-block classes but what about a better default?

Globally, I read that vertical-align only applies to inline or table elements so I think we can switch to display: inline-block (or remove vertical-align: middle).

Edit: I look at popular framework

1. Bootstrap use vertical-align: middle
   https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap-reboot.css#L168

2. Foundation use display: inline-block and vertical-align: middle
   https://github.com/zurb/foundation-sites/blob/develop/dist/css/foundation.css#L459

Thanks,
Florian

[adamwathan]

This is never a problem for me personally because I always use flexbox to position icons next to text, it's the only way to actually center them properly anyways:

<a href="" class="inline-flex items-center">
  Text link
  <svg class="...">...</svg>
</a>

You can always add inline to SVG elements that you don't want to be block, just like we had to add block to all the ones we didn't want to be inline in 0.x. No plans to change this as personally I haven't once needed to switch anything back to inline and I was adding block on almost every image/SVG/etc 😄 Plus it's a breaking change so we couldn't change it until 2.0 anyways.

If you want SVGs to be inline by default you can always add your own base styles:

@tailwind base;

svg {
  display: inline;
}

[dmitrystas]

We should definitely remove vertical-align: middle, since it does not apply to display: block elements.