Question

Github 讨论也开启了 here。

Demo 我正在努力完成的任务。

您如何使用 custom variants 变体使您创建的任何 responsive 可堆叠？我希望我的新变体能够响应性地更改，但 sm/md/lg 似乎与我创建的任何新变体都不叠加。

我知道您可以将响应式变体应用于您使用 utilities 创建的任何新 addUtility，但我如何确保可以响应式更改我的自定义变体？

Answer 1

通过这一行，您删除了除 custom-checked 之外的所有变体（甚至是响应式）。所以改变

variants: { scale: ['custom-checked'] }

到

variants: { 
    extend: { 
      scale: ['custom-checked'] 
    },
 },

它应该可以解决问题。完整的配置将是

module.exports = {

  variants: { 
    extend: { 
      scale: ['custom-checked'] 
    },
  },

  plugins: [
    plugin(({ addVariant, e }) => {

      addVariant('custom-checked', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`custom-checked${separator}${className}`)}:checked`
        })
      })
      
    }),
  ],
}

使用响应式变体堆叠自定义 Tailwind 变体

1 个答案: