如何将包含伪元素content的CSS规则转换为Tailwind CSS写法？

实现方案 #

完全可以不用额外CSS文件，仅通过Tailwind自带工具类实现需求，你可以按以下两种方式选其一即可：

方式1：直接给li元素加类（最常用，适配所有Tailwind v3.1+版本） #

修改后的代码如下：

<li class="after:content-['/'] after:text-red-500 after:mx-2.5 last:after:hidden">
   <Link to="/test">abc</Link>
</li>

类名与原有CSS规则对应关系：

• after:content-['/']：对应设置伪元素content属性为/
• after:text-red-500：对应color: red
• after:mx-2.5：对应margin: 0 10px（Tailwind默认1个spacing单位为4px，2.5*4=10px，完全匹配原样式）
• last:after:hidden：对应li:not(:last-child)规则，最后一个列表项的斜杠伪元素自动隐藏

方式2：给父级ol加类（批量生效，不用给每个li单独加类） #

如果列表项很多，直接在父级ol上添加以下类即可，所有子li自动匹配规则：

<ol class="[&>li:not(:last-child)::after]:content-['/'] [&>li:not(:last-child)::after]:text-red-500 [&>li:not(:last-child)::after]:mx-2.5">
  <!-- 所有li保持原有写法即可，不需要额外加类 -->
  <li>
    <Link to="/test">abc</Link>
  </li>
  <li>
    <Link to="/test">def</Link>
  </li>
</ol>

如果你的Tailwind版本低于v3.1不支持内联content值，只需要在tailwind.config.js的theme.extend中添加以下配置即可：

module.exports = {
  theme: {
    extend: {
      content: {
        'slash': '/',
      },
    },
  }
}

之后就可以用after:content-slash替代after:content-['/']使用。

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