Tailwind CSS Пользовательский вариант: Wha - разница между типами объявлений для комбинации псевдоклассов - PullRequest
Новая
       8

Tailwind CSS Пользовательский вариант: Wha - разница между типами объявлений для комбинации псевдоклассов

0 голосов
/ 11 апреля 2020

Я пытаюсь сделать собственный вариант для попутного ветра, в этом случае я хочу создать тот, который объединяет 2 псевдокласса. Я довольно новичок в Tailwind и CSS в целом.

Я просто хочу знать, есть ли какая-то перекрестная проблема, о которой я должен знать в своей реализации, или следует ли придерживаться другого подхода для некоторых шаблон передовой практики или что-то в этом роде. 

addVariant('myvariant', ({ modifySelectors, separator }) => {
   modifySelectors(({ className }) => {
        return `.${e(`myvariant${separator}${className}`)}:checked:hover`;
   });
});

Для фоновой утилиты будет сгенерировано следующее: 

.myvariant\:bg-black:checked:hover {
  background-color: black;
}

Как вы можете видеть в моей реализации, checked и hover псевдо-классы находятся в одном объявлении. Однако в каком-то другом примере я видел, что люди кодируют пользовательский вариант, который будет сгенерирован следующим образом: 

.theirvariant\:bg-black:checked, .theirvariant\:bg-black:hover {
  background-color: black;
}

Причина этого заключается в том, что я хочу, чтобы при наведении указатель мыши был другим.

...