TailwindCSS `гоча` с префиксами и псевдогосударственными утилитами.

tl;dr:
Когда вы добавляете префиксы в конфигурацию tailwind, вы можете подумать, что он добавляет префиксы ко всем утилитам. Сегодня я обнаружил, что это не совсем так, и я не думаю, что это где-либо задокументировано. Например, когда вы применяете префикс (например, «u-«) к вашей конфигурации, вы можете ожидать, что сможете использовать u-group и u-group-hover:. Tailwind применяет префикс к утилите group, но не применяет префикс к утилите group-hover. Поэтому их можно использовать следующим образом:

<div class="u-group">
    <div class="group-hover:u-some-utility">
    </div>
</div>

Дополнительные вещи

Честно говоря, tl;dr — это большая часть статьи в блоге, но я решил добавить немного дополнительных материалов и контекста.

Недокументированное

Я упомянул в tl;dr, что «не думаю», что эта ситуация где-либо задокументирована. Оглядываясь назад и внимательно читая документацию по tailwind, я думаю, что она действительно может быть задокументирована, но не объяснена так хорошо, как могла бы. Читая раздел документации по префиксам, я прочитал следующее:

Это означает, что классы с модификаторами отзывчивости или состояния, такими как sm: или hover:, будут по-прежнему иметь модификатор отзывчивости или состояния первым, а ваш пользовательский префикс будет отображаться после двоеточия.

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

Префиксы Tailwind

Я полагаю, что многие люди используют классы tailwind без префиксов по умолчанию, поэтому это может даже не вызвать у них беспокойства. Поэтому вы можете спросить: «Зачем вообще возиться с утилитами?».

Если вы собираетесь создавать свой сайт или приложение только с помощью tailwind и никаких других CSS-решений, то префиксы не имеют значения. Однако если вы похожи на меня, вам нравится использовать утилиты там, где они имеют смысл, но также нравится писать таблицы стилей на уровне блоков с соглашением об именовании BEM (или аналогичным) для более сложной стилизации. Когда вы делаете и то, и другое, имена классов могут стать трудночитаемыми, особенно с первого взгляда. Давайте поговорим о префиксах или пространствах имен.

Представьте, что вы пишете компонент и используете как BEM, так и tailwind. В вашей разметке будет довольно много классов. Я не думаю, что нужно приводить аргументы, чтобы согласиться с тем, что иногда классы tailwind (и не только) могут стать трудночитаемыми, но есть способы сделать это немного лучше.

Давайте рассмотрим этот маленький пример:

<div class="someComponent flex flex-col items-center justify-start">
    <div class="someComponent__child flex my-10 p-4">
    </div>
</div>

Давайте рассмотрим обслуживание и возвращение к проекту в будущем. Этот маленький пример достаточно легко просмотреть и увидеть, какие классы являются классами BEM, а какие — хвостового ветра. Теперь попробуйте представить себе гораздо больший файл с потенциально сотнями имен классов. Также можно добавить еще один слой, например, композиции (посмотрите на CubeCSS), что увеличит и без того длинный список. Именно здесь на помощь приходят префиксы, или пространства имен, которые помогают нам легко идентифицировать каждый тип имен классов при быстром просмотре файлов и разметки.

Давайте рассмотрим этот пример с префиксами:

<div class="b-someComponent u-flex u-flex-col u-items-center u-justify-start">
    <div class="b-someComponent__child u-flex u-my-10 u-p-4">
    </div>
</div>

Даже на этом небольшом примере должно быть легче определить, какие имена классов относятся к какому слою стиля. Префикс b- означает «блок», который является частью CubeCSS. Если вы не используете что-то вроде «композиции», вы можете использовать c- для «компонента». u- означает «утилита».

Еще одна небольшая вещь, которую можно сделать еще более читабельной, это разделить имена классов различных стилевых слоев чем-то вроде трубы, или |, так что разметка будет выглядеть следующим образом:

<div class="b-someComponent | u-flex u-flex-col u-items-center u-justify-start | md:u-flex-row md:u-justify-between">
    <div class="b-someComponent__child | u-flex u-my-10 u-p-4">
    </div>
</div>

Заключение

Надеюсь, эта короткая заметка поможет кому-нибудь в будущем. Будь то конкретная проблема, упомянутая в начале, или расширение ваших горизонтов CSS с помощью таких вещей, как BEM, префиксы или CubeCSS. Спасибо за прочтение и надеюсь, что у вас будет отличный день!