如何用Tailwind CSS让无序列表内的SVG图标与文本同行？

问题出在你给SVG加的flex类——在Tailwind CSS中，flex类对应的是display: flex，这会让SVG变成块级元素，自然会独占一行，和文本分离。

修复方案 #

把SVG的flex类替换成inline-flex（让SVG成为行内flex容器），同时可以加上align-middle让图标和文本垂直对齐更美观：

<ul class="my-12 bg-amber-100 p-6">
  <li class="list-disc text-wrap text-xl">
    Before before before before before before before before (<svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="inline-flex size-6 align-middle"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
      /></svg
    >) After after after after after after after after after
  </li>
</ul>

原理说明 #

• inline-flex：让SVG保持行内元素特性（不独占一行），同时保留flex容器的布局能力
• align-middle：让SVG和文本在垂直方向上居中对齐，优化视觉协调度

内容的提问来源于stack exchange，提问作者Mark Gavagan