Tailwind CSS — очень популярный фреймворк, но автор не советует использовать его в средних и крупных проектах. Проблем много, и они накапливаются. Во-первых, приходится выучить десятки классов: документация отличная, автодополнение помогает, но в начале всё равно сидишь с поиском и тратишь время на то, как правильно применить каждый класс. Во-вторых, Tailwind ломает разделение структуры и оформления: в HTML оказываются десятки атомарных классов, читаемость падает, переиспользовать ничего нельзя. Возражение создателя Tailwind Адама Ватана о том, что разделение просто меняет направление, работает в мире компонентов, где React или Vue и так смешивают логику, разметку и стили. Но в серверном рендеринге с классическими шаблонами разделение по-прежнему имеет смысл.
Имена классов непоследовательны: items-center, justify-center, text-center и place-content-center звучат похоже, но делают разное. Приходится лезть в документацию. Произвольные значения вроде w-[347px] или text-[#1a2b3c] — это лазейка, которая ломает всю систему ограничений. Консистентность всё равно зависит от дисциплины, а не от фреймворка. Хуже того, Tailwind создаёт ложное ощущение изучения CSS: разработчик учит абстракции (pt-4 вместо padding-top: 1rem), а не сами основы.
Читаемость страдает. Сравнение на кнопке: обычный CSS с переменными, вложенностью и понятными именами легко поддерживать, а bg-indigo-500 и rounded-lg требуют сверки с документацией. Причём сам Ватан признал, что @apply «существует только чтобы обманывать людей» — то есть способ вернуть читаемость противоречит философии Tailwind.
Ещё одна проблема — приоритеты. В HTML нельзя понять, какой класс победит: class="text-red-500 text-green-500" даёт красный цвет, потому что порядок генерации классов в итоговом CSS решает компилятор, а не порядок в разметке. Это утечка абстракции. И DevTools не спасают: при куче классов трудно понять, что переопределяется.
Главный вопрос сейчас не «утилиты против обычного CSS», а «современный нативный CSS против слоя утилит поверх». Платформа уже даёт cascade layers, нативную вложенность, CSS-переменные, :has(), container queries и color-mix(). Ирония в том, что сам Tailwind построен на этих же технологиях: использует нативные слои, @property, container queries и цвета OKLCH. Насколько он тогда вообще нужен? На небольших серверных проектах современного CSS достаточно, на больших продуктовых — у Tailwind есть аргументы. Автор советует сначала выучить CSS, а потом решать. Сэкономленное сегодня время, возможно, придётся отдать с процентами.