顺风:除第一个孩子外，所有孩子之前都是顺风

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创建您自己的修饰符，请阅读顺风CSS文档创建自定义修饰符

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

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-['/0a0']">
<li class="flex items-center">
<a href="#"> Home </a>
</li>
<li class="flex items-center">
<a href="#"> Products </a>
</li>
</ul>

注意：0a0只是一个没有中断空间的Unicode，您可以删除它。

查看实时