Tailwind CSS中before::伪类content内容无法正常显示的问题

我想通过:before伪类的content属性在每个<li>标签前显示索引编号，但使用Tailwind配置的该伪类内容无法正常显示（项目用PostCSS配置Tailwind）。

相关代码 #

Nav组件代码 #

import React from "react";
import navData from "../data/navData.js";
class Nav extends React.Component {
  render() {
    let { brand } = navData;
    let items = [];
    for (const item in navData) {
      items.push(navData[item]);
    }
    return (
      <nav className="flex justify-between h-[clamp(0px,10vw,100px)] bg-base_color/75  items-center backdrop-blur-sm sticky top-0 text text-white_like">
        <span className="ml-8">{brand}</span>
        <ul className=" w-2/5 flex justify-between mr-8">
          {items.slice(1).map((a, index) => {
            return (
              <li className={`before:content-['${index}']`} key={Math.random()}>
                {a}
              </li>
            );
          })}
        </ul>
      </nav>
    );
  }
}
export default Nav;

navData数据文件代码 #

const navData = {
  brand: "Mohiul Islam",
  item1: "about",
  item2: "experience",
  item3: "work",
  item4: "contact",
};
export default navData;

问题原因 #

Tailwind CSS 默认只会扫描静态类名，你通过模板字符串动态生成的before:content-['${index}']属于动态类，Tailwind 在构建时无法识别这类动态生成的类，因此不会生成对应的 CSS 规则。

解决方法 #

方法1：使用自定义属性（推荐） #

利用 Tailwind 支持的attr()函数，结合自定义数据属性传递动态索引值：

修改<li>标签代码，同时优化数组生成逻辑：

import React from "react";
import navData from "../data/navData.js";
class Nav extends React.Component {
  render() {
    let { brand } = navData;
    // 优化数组生成方式，替代原for循环
    const items = Object.values(navData).slice(1);
    
    return (
      <nav className="flex justify-between h-[clamp(0px,10vw,100px)] bg-base_color/75  items-center backdrop-blur-sm sticky top-0 text text-white_like">
        <span className="ml-8">{brand}</span>
        <ul className="w-2/5 flex justify-between mr-8">
          {items.map((a, index) => {
            return (
              <li 
                className="before:content-[attr(data-index)]" 
                data-index={index + 1} // 索引从1开始，不需要可直接写index
                key={a} // 用item值做key更稳定，避免Math.random()导致的重渲染问题
              >
                {a}
              </li>
            );
          })}
        </ul>
      </nav>
    );
  }
}
export default Nav;

方法2：自定义CSS类 #

如果需要更灵活的伪类样式，可以定义全局CSS类配合自定义属性：

1. 在项目全局CSS文件中添加：

.list-index::before {
  content: attr(data-index);
  /* 可额外添加样式，比如间距、颜色 */
  margin-right: 8px;
  color: #fff;
}

2. 修改React组件中的<li>：

<li 
  className="list-index" 
  data-index={index + 1}
  key={a}
>
  {a}
</li>

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