Next.js+Tailwind环境下有序列表（ol）无编号显示异常问题

问题原因 #

Tailwind CSS 的预设样式（preflight）会重置 HTML 元素的默认样式，其中就包括把 <ol> 和 <ul> 的 list-style-type 设为 none，同时移除默认左侧内边距，导致编号和项目符号直接消失。

解决方案 #

1. 手动添加 Tailwind 类（快速生效）

直接给列表元素加上对应样式类，就能恢复编号/符号：

<ol className="list-decimal pl-6">
  <li>第一项内容</li>
  <li>第二项内容</li>
</ol>

<ul className="list-disc pl-6">
  <li>无序列表项A</li>
  <li>无序列表项B</li>
</ul>

• list-decimal：恢复有序列表的数字编号，也可以用 list-lower-roman/list-upper-alpha 等其他编号样式
• list-disc：恢复无序列表的圆点符号，可选 list-circle/list-square 替换
• pl-6：给列表添加左侧内边距，避免编号/符号被内容遮挡

2. 全局配置样式（一次性搞定所有列表）

如果需要项目中所有列表都自动应用样式，在 globals.css 里添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  ol {
    @apply list-decimal pl-6;
  }
  ul {
    @apply list-disc pl-6;
  }
}

用 @layer base 把样式注入到 Tailwind 的基础样式层，之后所有 <ol> 和 <ul> 都会自动生效，不用重复加类。

3. 禁用 Tailwind 预设重置（不推荐）

完全关闭 Tailwind 的 preflight 样式重置，会导致所有 HTML 元素恢复浏览器默认样式，可能引发其他样式冲突，仅适合特殊场景：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    preflight: false,
  },
  // 其他配置项...
}

验证示例 #

比如你的原代码可能是这样的：

export default function Home() {
  return (
    <div className="p-8">
      <h3>有序列表</h3>
      <ol>
        <li>初始化项目</li>
        <li>安装依赖</li>
        <li>启动服务</li>
      </ol>

      <h3 className="mt-4">无序列表</h3>
      <ul>
        <li>Next.js</li>
        <li>Tailwind CSS</li>
        <li>React</li>
      </ul>
    </div>
  )
}

给 <ol> 和 <ul> 添加对应类后，就能正常显示编号和项目符号了。

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