TailwindCSS focus + заполнитель в файле CSS - PullRequest
Новая
       24

TailwindCSS focus + заполнитель в файле CSS

1 голос
/ 02 октября 2019

Можно ли переместить класс focus:placeholder-gray-600 из HTML в файл CSS?

Из следующего HTML 

<input class="focus:placeholder-gray-600" type="text">

И я хотел бы получить 

<input class="my-class" type="text"> 

#styles.css

.my-class {
  ...
}

1 Ответ

0 голосов
/ 02 октября 2019

Да, вы можете сделать это с помощью попутного css, но не только с файлами CSS.

Вам нужно будет обработать ваши CSS-файлы с помощью PostCSS и затем выполнить шаги, описанные в документации в разделе Извлечение CSSкомпоненты с @ apply

Основная идея состоит в том, чтобы использовать предоставляемую попутным ветром @apply postcss директиву: 

<style>
.my-class:focus {
  @apply placeholder-gray-600;
}
</style>

Обратите внимание, что аспект focus должен бытьиспользуется как в «обычном» css с псевдо-селектором в объявлении класса, вместо того, чтобы делать это: 

/** INVALID **/
.my-class {
  @apply focus:placeholder-gray-600;
}

См. также это примечание из документации:

Обратите внимание, что варианты какhover :, focus: и {screen}: нельзя применить напрямую, поэтому вместо этого примените простую версию утилиты к соответствующему псевдо-селектору или медиазапросу.

...