Длинные строки классов: проблема и решения

Главная боль новичка в Tailwind — простыни классов. Разбираем, когда это проблема, а когда нет.

В чём проблема

Реальная кнопка набирает с десяток утилит, и если таких кнопок много, разметка повторяется:

<button class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow">Сохранить</button>
<button class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow">Отправить</button>

Один и тот же длинный набор скопирован дважды. Если дизайн кнопки изменится, придётся править во всех местах — это и есть дублирование, с которым надо что-то делать.

Решение 1. Компонент фреймворка (лучшее)

Если вы используете React, Vue или подобное, самый чистый путь — вынести разметку в переиспользуемый компонент. Классы пишутся один раз внутри него:

<!-- Vue: используем готовый компонент -->
<BaseButton>Сохранить</BaseButton>
<BaseButton>Отправить</BaseButton>

Длинные классы спрятаны в BaseButton, а в местах использования — чисто и коротко. Документация Tailwind прямо рекомендует этот подход как основной.

Решение 2. Директива @apply

Если фреймворка нет (или хочется именованный CSS-класс), утилиты можно собрать в один класс директивой @apply прямо в CSS:

.btn-primary {
  @apply inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow;
}

<button class="btn-primary">Сохранить</button>

Теперь в разметке короткое имя, а все утилиты собраны в одном месте. Подробнее про @apply — в следующем уроке.

Решение 3. Цикл по данным

Часто повтор — это не разные элементы, а список однотипных. Тогда разметка пишется один раз, а данные перебираются циклом. Псевдокод идеи:

элементы.forEach(item => вывести <li class="px-4 py-2 ...">item</li>)

Класс прописан единожды, повтор создаёт цикл — дублирования в исходнике нет.

А всегда ли это проблема

Важно: длинные классы на уникальном элементе (который встречается один раз) — это нормально и не требует вынесения. Преждевременно прятать всё в @apply — антипаттерн: вы теряете главное преимущество Tailwind (видеть вид прямо в разметке) и фактически возвращаетесь к обычному CSS. Выносите только повторяющееся.

Итог

Проблема — не длина классов сама по себе, а их дублирование.
Лучшее решение для приложений — компонент фреймворка; без фреймворка — @apply или цикл по данным.
Уникальные элементы можно и нужно оставлять с инлайн-утилитами — не выносите ради вынесения.