Блог

Обсуждение на Github также открылось здесь.

Демонстрация того, чего я пытаюсь достичь.

Как вы делаете все, custom variants что вы создаете, совместимым с responsive вариантами? Я хочу, чтобы мой новый вариант можно было быстро изменить, но sm/md/lg , похоже, он не сочетается ни с одним новым вариантом, который я создаю.

Я знаю , что вы можете применить адаптивные варианты к любому новому utilities , с помощью которого вы создаете addUtility , но как я могу убедиться, что мои пользовательские варианты могут быть изменены в соответствии с требованиями?

С помощью этой строки вы удалили все варианты (даже отзывчивые), за исключением 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`
        })
      })
      
    }),
  ],
}