求助：如何使用Tailwind CSS自定义有序列表（ol）的编号样式？

Tailwind CSS本身没有提供直接控制有序列表编号的专属工具类，但可以通过以下几种方式实现自定义样式：

方法1：使用@layer自定义工具类（推荐，可复用） #

在你的Tailwind CSS入口文件中添加自定义工具类，整合到Tailwind体系中方便复用：

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

@layer utilities {
  .custom-ol {
    list-style-type: none;
    counter-reset: ol-counter;
  }
  .custom-ol > li {
    counter-increment: ol-counter;
    position: relative;
    padding-left: 2.5rem; /* 控制编号与内容的间距 */
  }
  .custom-ol > li::before {
    content: counter(ol-counter) ".";
    position: absolute;
    left: 0;
    /* 用Tailwind颜色变量或工具类值设置样式 */
    color: theme('colors.blue.600');
    font-weight: 700;
    font-size: theme('fontSize.lg');
  }
}

在HTML中使用：

<ol class="custom-ol space-y-3">
  <li>这是第一项内容</li>
  <li>这是第二项内容</li>
  <li>这是第三项内容</li>
</ol>

方法2：直接使用Tailwind任意值语法（无需额外CSS） #

利用Tailwind的任意值特性，直接在HTML元素上定义计数器和伪元素样式：

<ol class="list-none [counter-reset:ol-counter] space-y-3">
  <li class="[counter-increment:ol-counter] relative pl-8 
             before:content-[counter(ol-counter)_'.'] before:absolute before:left-0
             before:text-blue-600 before:font-bold before:text-lg">
    这是第一项内容
  </li>
  <li class="[counter-increment:ol-counter] relative pl-8 
             before:content-[counter(ol-counter)_'.'] before:absolute before:left-0
             before:text-blue-600 before:font-bold before:text-lg">
    这是第二项内容
  </li>
</ol>

注意：任意值中的空格需要用下划线_替代，比如counter(ol-counter)_'.'表示计数器值加一个点。

方法3：修改默认编号样式（仅颜色、字体等） #

如果不需要调整编号位置，只是修改默认编号的颜色、字体等样式，可以使用Tailwind v3.2+支持的marker伪元素工具类：

<ol class="list-decimal marker:text-blue-600 marker:font-bold pl-6 space-y-3">
  <li>这是第一项内容</li>
  <li>这是第二项内容</li>
  <li>这是第三项内容</li>
</ol>

这种方法限制较多，marker伪元素仅支持部分CSS属性（如颜色、字体、字号等），无法调整编号与内容的间距。

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