Tailwind CSS自定义addVariant插件不工作

Question

我正试图向Tailwind工具带添加一个名为not-first的新变体，但当我尝试使用它时，它不起作用。

tailwind.config.js:

const plugin = require('tailwindcss/plugin');
module.exports = {
mode: 'jit',
purge: ['./src/**/*.{js,jsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
plugin(({ addVariant, e }) => {
addVariant('not-first', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
const element = e(`not-first${separator}${className}`);
return `.${element} > :not(:first-child)`;
});
});
}),
],
}

用法：

<li className={`not-first:bg-blue`}>{item.name}</li>

我做错了什么？

Answer 1

看起来您正在将:not(:first-child)应用于not-first:伪类所针对的元素的子级。

:first-child应应用于子元素本身(请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/:first-儿童(。

要解决此问题，您可以尝试更改

return `.${element} > :not(:first-child)`;

至

return `.${element}:not(:first-child)`;