将自定义 Tailwind 变体与响应式变体堆叠在一起

【问题标题】：Stacking custom Tailwind variants with responsive variants将自定义 Tailwind 变体与响应式变体堆叠在一起
【发布时间】：2021-09-01 07:56:12
【问题描述】：

Github 讨论也开启了here。

Demo 我正在努力完成的工作。

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

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

【问题讨论】：

标签： tailwind-css

【解决方案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`
        })
      })
      
    }),
  ],
}

【讨论】：