Какие архитектурные решения Tailwind CSS навязывает вокруг rendering, state, routing, styling, data loading или deployment?

Что Tailwind CSS навязывает, а что нет

Tailwind — это CSS-фреймворк, не application framework. Он не касается routing, state management или data loading. Однако он создаёт ряд архитектурных ограничений в слое стилизации и сборки.

Rendering и сборка

Tailwind работает как PostCSS-плагин (или через Vite-плагин в v4). Это означает:

• JIT-компилятор сканирует файлы, указанные в content (v3) или @source (v4), и генерирует только используемые CSS-классы.
• Итоговый CSS-файл минимален, но его нельзя изменить в runtime — стили статичны относительно того, что было в шаблонах на момент сборки.
• Dynamic class names (`bg-${color}`) не попадают в бандл без явного safelist в конфиге.

// tailwind.config.js (v3)
module.exports = {
  content: ['./src/**/*.{tsx,ts,jsx,js,html}'],
  safelist: [
    { pattern: /^bg-(red|green|blue)-(100|500|900)$/ }
  ],
  theme: {
    extend: {
      colors: { brand: '#c28b00' },
      borderRadius: { card: '12px' }
    }
  }
};

Стилизация и дизайн-токены

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

• Нет глобальных CSS-классов с общим именем — каждый класс атомарен и предсказуем.
• Дизайн-токены живут в tailwind.config.js → theme (v3) или в CSS-блоке @theme (v4), и доступны через theme() функцию в CSS или через плагины.
• В v4 вся конфигурация переезжает в CSS: @import "tailwindcss" и @theme { --color-brand: #c28b00; }.

/* Tailwind v4 — конфиг прямо в CSS */
@import "tailwindcss";

@theme {
  --color-primary: #c28b00;
  --radius-card: 12px;
  --font-sans: 'Rubik', sans-serif;
}

Deployment

Tailwind не влияет на deployment-стратегию напрямую, но:

• Требует Node.js на CI/CD для PostCSS-шага (или Vite build в v4).
• В Docker-образах нужно убедиться, что devDependencies установлены на build-шаге.
• CDN Play (через <script src="https://cdn.tailwindcss.com">) работает без сборки, но генерирует все классы — не для production.

Что Tailwind НЕ навязывает

• Routing: полностью определяется фреймворком (Next.js App Router, React Router, etc.).
• State management: Zustand, Redux, Jotai — выбор независим от Tailwind.
• Data loading: fetch, React Query, SWR — не связаны с CSS-фреймворком.
• Компонентная архитектура: Tailwind одинаково работает с atomic design, feature-sliced design и любой другой структурой.

Подводные камни

• JIT сканирует только файлы из content — пропустили директорию, классы исчезают из production-бандла.
• В Tailwind v4 нет tailwind.config.js — плагины и пресеты подключаются через @plugin директиву в CSS, что ломает v3-совместимые гайды.
• SSR-фреймворки (Next.js, Remix) могут выдавать FOUC, если CSS не инлайнится в head — нужно проверить конфигурацию _document или app/layout.
• @apply в глобальном CSS создаёт неочевидные зависимости — изменение токена ломает все места с @apply.
• PostCSS-плагин Tailwind v3 медленнее Vite-плагина v4 — в крупных монорепо время сборки заметно отличается.
• При использовании CSS Modules вместе с Tailwind возникает двойная система именования — трудно выбрать, где стилизовать компонент.
• Тема через theme() в CSS работает только если PostCSS обрабатывает файл — не работает в inline styles или CSS-in-JS без специальных пресетов.
• В Storybook нужно явно импортировать globals.css в preview.js, иначе Tailwind-классы не применяются к stories.

• Знать термины Tailwind CSS, но не понимать связи между абстракциями
• Объяснять поведение через отдельные примеры вместо причинной модели
• Не связывать mental model с диагностикой ошибок

• Понимает ключевые абстракции Tailwind CSS
• Может предсказывать поведение системы через mental model
• Связывает модель с debugging и production decisions