如何在TailwindCSS的content属性中为计数器添加后缀点与空格？

我有一个有序列表（省略了counter-reset和counter-increment相关代码）：

<ol class="...">
    <li class="... before:content-[counter(name)]">I like cheese</li>
</ol>

当前显示效果为：1I like cheese，我希望在计数器后添加一个点和空格，变成1. I like cheese。但TailwindCSS无法解析原生CSS里可行的写法：

content: counter(name) '. ';

请问如何在不添加硬编码类的情况下解决这个问题？或者有没有合适的插件可以处理这类需求？

补充：我知道list-decimal可以实现该效果，但我想了解使用CSS计数器结合before伪元素的可行替代方案。

1. 直接使用Tailwind的嵌套引号语法（Tailwind v3.2+） #

Tailwind支持在content-[]中用嵌套引号实现字符串拼接，同时用下划线_表示空格，写法如下：

<li class="... before:content-[counter(name)_'._']">I like cheese</li>

这里的'._'会被解析为. （点加空格），和计数器值拼接后就能得到目标效果。

2. 通过Tailwind配置添加自定义工具类 #

如果不想在HTML里写复杂的content值，可以在tailwind.config.js中封装自定义工具类，避免硬编码内容：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    ({ addUtilities }) => {
      addUtilities({
        '.counter-with-dot': {
          '&::before': {
            content: 'counter(name) ". "',
          },
        },
      });
    },
  ],
};

之后在HTML中直接引用这个工具类即可：

<li class="... counter-with-dot">I like cheese</li>

3. 用自定义CSS结合@apply复用Tailwind样式 #

在项目的自定义CSS文件中，用@apply复用你原本的Tailwind类，同时定义计数器的content规则：

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

.counter-item {
  @apply ...; /* 填入你原本给li的Tailwind类 */
  &::before {
    content: counter(name) ". ";
  }
}

HTML中使用这个类：

<li class="counter-item">I like cheese</li>

插件方案 #

可以使用tailwindcss-content-utilities插件，它扩展了Tailwind的content工具类，支持更复杂的内容拼接逻辑，包括计数器和字符串的组合，安装启用后就能用更简洁的语法实现需求。

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