顺风：在除第一个 child 之外的所有 child 之前

Question

我有面包屑。我正在尝试使用 Tailwind CSS 将每个项目与内容“/”分开。我试过这个：last:before:content-['/'] 但它不起作用。

HTML

<nav class="flex" aria-label="Breadcrumb">
  <ul class="flex items-center">
    <li class="flex items-center before:content-['/']">
      <a href="#"> Home </a>
    </li>
    <li class="flex items-center before:content-['/']">
      <a href="#"> Products </a>
    </li>
  </ul>
</nav>

现在，它看起来像这样：

/Home  /Products

我想要这样：

Home / Products

是否有机会将此代码转换为 Tailwind CSS？

li:not(:first-child):before {
  content: "/";
}

Answer 1

是的，可以使用 addVariant API 创建自己的修饰符，阅读 tailwind CSS 文档 Creating custom modifiers

addVariant 函数允许您注册自己的自定义修饰符，可以像 built-in 悬停、焦点、活动等变体一样使用。

1- 转到 tailwind.config.js 并在顶部添加此行

let plugin = require('tailwindcss/plugin')

2- 然后在 plugin 中定义修饰符，如下所示：

plugins: [
    plugin(function ({ addVariant }) {
      addVariant('slash', 'li:not(:first-child):before')
    }),
  ],

3- 像这样使用它：

<ul class="flex items-center space-x-4 slash:content-['/[=12=]a0']">
    <li class="flex items-center">
      <a href="#"> Home </a>
    </li>
    <li class="flex items-center">
      <a href="#"> Products </a>
    </li>
</ul>

NOTE: the [=15=]a0 is just a Unicode for no-break space, you can delete it.

看到了LIVE

顺风：在除第一个 child 之外的所有 child 之前

Tailwind :before to all child except first child

css

tailwind-css