Прощай, Tailwind: как я учился структурировать CSS и перестал бояться кастомных стилей

Помните то чувство, когда проект на Tailwind превращается в простыню из className="flex items-center justify-between p-4 bg-white shadow-md"? Джулия Эванс, автор блога jvns.ca, решила, что с неё хватит, и поделилась опытом миграции обратно к структурированному CSS. Спойлер: это не просто «уберите молоток, дайте напильник», а целая философия.

Джулия признаётся, что Tailwind был удобен для быстрых прототипов, но когда проект разросся, utility-классы стали напоминать код на ассемблере — каждая строчка понятна, но общую картину не собрать. Она перешла на CSS с методологией, напоминающей BEM, и даже написала небольшой плагин для PostCSS, чтобы автоматизировать рутину. «Я больше не чувствую, что борюсь с браузером», — говорит она.

Ключевые уроки из её опыта:

• Группируйте стили по компонентам, а не по утилитам. Это как сортировать носки по парам, а не по цветам.
• Используйте кастомные свойства (CSS custom properties) для частых значений — они работают быстрее, чем SASS-переменные, и не требуют сборки.
• Не бойтесь специфичности: селекторы с одним классом — это не стыдно, это читаемо.
• Оставьте Tailwind для мелких проектов, где скорость важнее архитектуры.

Конечно, холивары «Tailwind vs CSS» не утихнут, но Джулия напоминает: инструмент должен служить вам, а не вы ему. Если ваш CSS-файл напоминает список покупок в IKEA, возможно, пора пересмотреть подход.

Комментарий студии METABYTE: Мы тоже проходили этот путь — от восторга «быстрыми классами» до осознания, что поддерживать такой код могут только джедаи. В наших проектах мы комбинируем подходы: Tailwind для MVP, а для продакшена — структурированный CSS с дизайн-системой. Главное — не забывать, что код пишется для людей, а не для препроцессора.