Почему веб-разработчики отказываются от Tailwind в пользу современного CSS

Эванс отметила, что в момент знакомства с Tailwind не понимала, как правильно организовывать CSS-код, поэтому библиотека стала для неё способом избежать хаоса и быстро создавать небольшие сайты.

Tailwind помог сформировать подход к структуре CSS

Во время миграции проектов разработчик пришла к выводу, что Tailwind фактически научил её ряду принципов организации CSS.

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

По словам Эванс, Tailwind уже предлагал готовые решения для многих подобных задач, и часть этих подходов она решила сохранить даже после отказа от фреймворка.

В частности, разработчик оставила:

• reset-стили;
• систему цветов;
• шкалу размеров шрифтов;
• набор утилитарных классов;
• принципы организации компонентов.

Компонентный подход остался основой новой архитектуры

Основой новой структуры CSS стала организация кода по компонентам — в духе Vue или React, даже если сайт не использует JavaScript.

Каждый компонент получил собственный уникальный класс и отдельный CSS-файл. При этом стили одного компонента не должны переопределять стили другого.

Эванс объяснила, что такой подход позволяет изолировать изменения и работать только с ограниченным объёмом CSS-кода внутри конкретного компонента, не затрагивая остальной проект.

Для вложенных состояний используются вложенные селекторы CSS. В качестве примера она привела компонент .zine с модификаторами .horizontal и .vertical.

<figure class="zine horizontal">
    <img src="whatever.jpg">
</figure>

.zine {
  &.horizontal { ... }
  &.vertical { ... }
  &:hover { ... }
}

Цвета и размеры шрифтов перенесены из Tailwind

Разработчик сохранила централизованный файл colors.css, где все цвета задаются через CSS-переменные.

:root {
  --pink: #fea0c2;
  --pink-light: #F9B9B9;
  --red: #f91a55;
  --orange: rgb(222, 117, 31);
  ...
}

Она отметила, что работа с цветами остаётся сложной задачей, поэтому в ходе миграции решила не менять существующую палитру.

Аналогичным образом были перенесены и размеры шрифтов. Вместо использования классов Tailwind вроде text-lg автор создала собственные CSS-переменные на основе размеров из Tailwind.

  --size-xs: 0.75rem;
  --line-height-xs: 1rem;

  --size-sm: 0.875rem;
  --line-height-sm: 1.25rem;

По её словам, это позволяет сохранить привычную систему масштабирования текста без привязки к самому фреймворку.

h3 {
  font-size: var(--size-lg);
  line-height: var(--line-height-lg);
}

Категория утилит содержит классы, повторяющиеся в разных компонентах, такие как .sr-only для экранных дикторов, скопированные из Tailwind. Глобальные базовые стили сведены к минимуму и включают адаптацию тега section с ограничением внутренней ширины до 950px:

section {
  --inner-width: 950px;
  padding: 3rem max(1rem, (100% - var(--inner-width))/2);
}

a {
  color: var(--orange);
}

Разработчик пытается отказаться от хаотичных отступов

Одной из проблем Tailwind Эванс назвала бессистемное управление отступами.

По её словам, раньше она «хаотично добавляла padding и margin в разных местах», пока интерфейс не начинал выглядеть правильно.

Теперь разработчик пытается передать ответственность за отступы внешним компонентам макета. В качестве примера она использует селектор:

section > *+* {
  margin-top: 1rem;
}

Такой подход позволяет равномерно распределять расстояние между дочерними элементами секции.

Вместо media queries автор использует CSS Grid

Серьёзные изменения коснулись и адаптивного дизайна.

Если в Tailwind Эванс активно использовала media queries через конструкции вроде md:text-xl, то теперь она делает ставку на более гибкие возможности CSS Grid.

Разработчик рассказала, что активно изучает auto-fit, grid-template-areas и другие современные возможности CSS Grid, позволяющие создавать адаптивные макеты без большого количества breakpoint-ов.

В качестве примера она привела сетку с автоматическим переходом между одной и двумя колонками в зависимости от ширины экрана.

display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), max-content));
justify-content: center;

Отдельный build-системы для разработки больше не нужны

Автор отметила, что современные возможности CSS позволяют отказаться от полноценной build-системы на этапе разработки.

Она использует встроенные @import и вложенные селекторы CSS, а для production-сборки применяет esbuild.

esbuild style.css --bundle --loader:.svg=dataurl --loader:.woff2=file --outfile=/tmp/out.css

По словам Эванс, ей нравится esbuild из-за ориентации на веб-стандарты и того, что инструмент распространяется как статический бинарный файл на Go.

Причины отказа от Tailwind

Отказ от использования фреймворка обусловлен следующими факторами:

• Начиная с 2018 года Tailwind стал сильно зависеть от систем сборки, из-за чего новые версии невозможно использовать без компиляторов. По этой причине автор годами применял вторую версию (v2) Tailwind, также упоминая проект litewind.
• Отказ от компиляции приводил к включению в проекты неотфильтрованного файла tailwind.min.css размером 2,8 МБ (270 КБ в архивированном формате gzip).
• Произошел рост квалификации автора в чистом CSS, а ограничения Tailwind мешали реализации нестандартных решений.
• Совмещение ванильного CSS и Tailwind в рамках одних и тех же проектов усложняло техническую поддержку. Появился интерес к написанию семантического HTML.

Среди перспективных технологий CSS, требующих дальнейшего изучения, названы каскадные слои (@layer), область видимости (@scope), контейнерные запросы (container queries) и субгрид (subgrid).

За последние 10 лет отношение автора к технологии изменилось в сторону признания сложности задач, которые решает CSS, включая адаптивность на миллиардах устройств. Tailwind критикуется за содействие обесцениванию экспертных знаний в области CSS, что становится критичным в эпоху больших языковых моделей (LLM).