Tailwind：如何创建加载：修改器/变体？

Question

我正在尝试为处于加载状态的按钮创建一个修饰符。

根据此处的文档，我在 tailwind.config.js 中添加了以下内容

// I assume this is included in tailwindcss 
// and doesn't need to be installed separately
const plugin = require('tailwindcss/plugin')

module.exports = {
     // ...
    plugins: [
        plugin(function({ addVariant }) {
            addVariant('loading', '&:loading')
          })
    ],
};

我认为这允许我在类中添加一个字符串，loading以便它将应用这些样式。但这似乎不起作用，我做错了什么？

<!-- I assume this should be blue-600 -->
<button className="bg-blue-600 loading:bg-blue-100">
  This is a normal button
</button>

<!-- I assume this should be blue-100 since it has className, "loading" -->
<button className="loading bg-blue-600 loading:bg-blue-100">
  This is a loading button
</button>

Answer 1

&符号指向应用了此变体的元素，因此应在 CSS 中将其翻译为“带有类的此元素.loading”。在您的示例中将:loading被翻译为loading无效的状态

所以应该addVariant('loading', '&.loading')不是addVariant('loading', '&:loading')

const plugin = require('tailwindcss/plugin')

module.exports = {
    plugins: [
        plugin(function({ addVariant }) {
            addVariant('loading', '&.loading') // here
          })
    ],
};