使用TailwindCSS Typography时如何对齐列表元素内的文本？

你看到的- title错位和日期内容长度无关——示例里所有yyyy-mm-dd都是固定10位字符，偏移来自Tailwind Typography插件对列表项的默认样式残留：

• 你虽然通过prose-ul:list-none移除了默认列表圆点，但插件默认给li设置的左侧内边距、::before伪元素占位没有被完全清除，不同列表项的内容起始计算位置存在微小偏差
• 普通文档流下相邻行内元素的字偶距、行高渲染差异会把这个偏差放大，最终出现肉眼可见的错位

最稳定的方案是给列表项用固定列宽的网格布局，彻底脱离默认文档流的位置计算偏差，直接修改现有代码的类名即可：

1. 给ul加list-none p-0 grid gap-2，清除默认列表样式和左侧内边距，让列表项垂直排布并保留合适间距
2. 给每个li加grid grid-cols-[auto_1fr] gap-2 items-baseline m-0，设置第一列（日期列）宽度随内容自适应、第二列（标题部分）占满剩余宽度，所有第二列内容会自动对齐到同一竖线
3. 可以把原来单独包裹-的冗余span删掉，直接把分隔符和链接放在第二列即可

修改后的完整可运行代码：

<html>
  <head>
    <title>Testing Tailwind CSS text alignment</title>
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
  </head>
  <body>
    <div id="post-body" class="mx-auto prose prose-stone px-2 lg:px-0">
      <h1>Programming</h1>
      <ul class="list-none p-0 grid gap-2">
        <li class="grid grid-cols-[auto_1fr] gap-2 items-baseline m-0">
          <span>2020-08-22</span>
          <span>- <a href="230A6048.html">Blog Post Title 1</a></span>
        </li>
        <li class="grid grid-cols-[auto_1fr] gap-2 items-baseline m-0">
          <span>2018-12-15</span>
          <span>- <a href="F6A029B0.html">Blog Post Title 2</a></span>
        </li>
        <li class="grid grid-cols-[auto_1fr] gap-2 items-baseline m-0">
          <span>2012-02-23</span>
          <span>- <a href="76191EE8.html">Blog Post Title 3</a></span>
        </li>
        <li class="grid grid-cols-[auto_1fr] gap-2 items-baseline m-0">
          <span>2011-08-07</span>
          <span>- <a href="1DE16EA3.html">Blog Post Title 4</a></span>
        </li>
      </ul>
    </div>
  </body>
</html>

如果不想逐个给列表项加类，可以直接在Tailwind配置里全局覆写prose的列表样式：

tailwind.config = {
  theme: {
    extend: {
      typography: {
        stone: {
          css: {
            'ul li': {
              paddingLeft: 0,
              display: 'grid',
              gridTemplateColumns: 'auto 1fr',
              gap: '0.5rem',
              margin: '0.5rem 0'
            },
            'ul li::before': {
              display: 'none'
            }
          }
        }
      }
    }
  }
}

补充：如果后续日期长度可能变化（比如加时间戳、显示月/日缩写），把grid-cols-[auto_1fr]改成grid-cols-[10ch_1fr]即可，10ch刚好对应10位日期的固定宽度，对齐精度会更高。

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