如何使用TailwindCSS实现换行列表项的对齐？

问题根源在于你使用了list-inside类，该类会将列表项目符号（如圆点）放置在内容容器内部，导致文本换行后无法与行首保持对齐。

修改方案： #

1. 移除list-inside类，Tailwind默认采用list-outside（项目符号位于内容容器外部）
2. 给<ul>添加左侧内边距（例如pl-6），为项目符号预留空间，避免符号被容器裁切

修改后的代码如下：

<script src="https://cdn.tailwindcss.com"></script>

<div class="m-50">
  <ul class="w-1/4 mx-auto bg-cyan-500 list-disc pl-6">
    <li>List number 1 always goes first</li>
    <li>List number 2 is second</li>
    <li>List number 3... is stackoverflowed</li>
  </ul>
</div>

效果说明： #

• list-outside（默认行为）让项目符号处于<li>内容的左侧外部区域
• pl-6（对应1.5em内边距）既为项目符号提供了显示空间，又确保文本换行后能与行首对齐

内容的提问来源于stack exchange，提问作者Peerapat Watta