如何使用Tailwind CSS设置content属性实现列表分隔符效果

完全可以用Tailwind实现该需求，有两种简便方案，不需要复杂的全局配置：

方案1：零配置直接写行内任意值类（推荐） #

Tailwind 3.0以上版本支持任意选择器和任意content值语法，直接给面包屑的ol标签加以下类即可，不需要修改任何配置文件：

<ol class="[&>li:not(:last-child):after]:content-['/'] [&>li:not(:last-child):after]:mx-2">
  <!-- 面包屑li内容 -->
</ol>

语法说明：

• 方括号[]是Tailwind的自定义选择器语法，&指代当前绑定的ol元素
• [&>li:not(:last-child):after] 匹配所有非末尾li的after伪元素
• 后面的:mx-2是给分隔符加左右边距，可根据视觉需求调整数值

方案2：全局复用简化写法 #

如果项目中多处用到面包屑，不想每次写长类，可以在tailwind.config.js中扩展content配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      content: {
        slash: '"/"',
      },
    },
  }
}

配置后就可以用简化的类：

<ol class="[&>li:not(:last-child):after]:content-slash [&>li:not(:last-child):after]:mx-2">
  <!-- 面包屑li内容 -->
</ol>

备选纯DOM实现 #

如果不想用伪元素写法，也可以直接在非末尾的li后面手动插入分隔符：

<li>首页</li>
<span class="mx-2">/</span>
<li>分类</li>

这种写法没有任何学习成本，小项目临时使用也很方便。

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