實務上 <button> 內常有文字與圖片，但我們會希望同時 垂直置中 文字與圖片，可巧妙使用 Flexbox 達成。
Version
Tailwind CSS 1.9.0
inlin-flex & items-center
View article 與箭頭剛好置中於 <button> 內。
<template>
<button class="inline-flex items-center text-white font-semibold bg-blue-700 rounded-md shadow-sm px-6 py-3">
<span>View article</span>
<svg class="ml-3 w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</template>
第 2 行
<button class="inline-flex items-center">
<span>View article</span>
<svg/>
</button>
將 <span> 與 <svg> 放在 <button> 內，在 <button> 內加上 inline-flex 與 items-center utility。
inline-flex：讓<button>成為 flexbox container，內部 element 均受 flexbox 控制，但<button>仍維持其 inline 本色items-center：由於<button>已經成為 flexbox container，items-center使<span>與<svg>在 cross-axis 能垂直置中
若不下
items-center，會發現<svg>略為偏上
Conclusion
- Tailwind CSS 巧妙地使用 flexbox 特性將文字與圖片置中，只要加上
inline-flex與items-center即可