Как перейти с обычного CSS на Tailwind

Миграция с обычного CSS на Tailwind — процесс постепенный. Полная замена за один раз рискованна; лучше двигаться по компонентам или страницам. В этой статье рассмотрены стратегии миграции, соответствия классов и типичные подводные камни.

Стратегии миграции

Постепенная миграция (рекомендуется)

1. Установить Tailwind рядом с существующим CSS
2. Отключать старые стили по мере переноса компонентов
3. Начинать с новых компонентов и страниц
4. Регулярно проверять визуальную регрессию

Гибридный подход

Tailwind и обычный CSS могут сосуществовать. Tailwind добавляет утилиты, а глобальные стили (сброс, шрифты, переменные) остаются в CSS.

Полная замена

Подходит для небольших проектов. Высокий риск, требует тщательного тестирования.

Установка Tailwind в существующий проект

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

В tailwind.config.js указать все файлы с разметкой:

content: [
  './src/**/*.{html,js,jsx,tsx,vue}',
  './public/index.html',
],

Добавить в основной CSS-файл:

@tailwind base;
@tailwind components;
@tailwind utilities;

Таблица соответствий

Отступы

CSS	Tailwind
padding: 1rem	p-4
padding: 0 1rem	px-4
margin: 0 auto	mx-auto
margin-top: 2rem	mt-8
gap: 1rem	gap-4

Flexbox

CSS	Tailwind
display: flex	flex
flex-direction: column	flex-col
justify-content: center	justify-center
align-items: center	items-center
flex: 1	flex-1

Размеры

CSS	Tailwind
width: 100%	w-full
max-width: 36rem	max-w-xl
height: 100vh	h-screen
min-height: 100vh	min-h-screen

Типографика

CSS	Tailwind
font-size: 1.125rem	text-lg
font-weight: 700	font-bold
text-align: center	text-center
line-height: 1.5	leading-normal

Цвета

CSS	Tailwind
color: #3b82f6	text-blue-500
background-color: #1f2937	bg-gray-800
border-color: #e5e7eb	border-gray-200

Конвертация компонентов

До (обычный CSS)

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

<div class="card">
  <h3 class="card-title">Заголовок</h3>
</div>

После (Tailwind)

<div class="flex flex-col p-6 bg-white rounded-lg shadow-md">
  <h3 class="text-xl font-semibold mb-2">Заголовок</h3>
</div>

Работа с CSS-переменными

Если проект использует переменные (--color-primary, --spacing-unit), их можно подключить в Tailwind:

theme: {
  extend: {
    colors: {
      primary: 'var(--color-primary)',
    },
    spacing: {
      unit: 'var(--spacing-unit)',
    },
  },
},

Или постепенно заменить переменные на значения из темы Tailwind.

Сохранение @layer base

Глобальные стили (сброс, базовые стили для body, a) лучше оставить в @layer base:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply antialiased text-gray-900 bg-white;
  }
  a {
    @apply text-blue-600 hover:underline;
  }
}

Инструмент конвертации

Сервис CSS в Tailwind на rechecker.ru позволяет вставить фрагмент CSS и получить эквивалентные классы Tailwind. Удобно для разовых замен и обучения.

Типичные проблемы

Специфичность

Tailwind-классы имеют низкую специфичность. Если глобальные стили переопределяют их, используйте ! для important: !text-red-500.

Длинные строки классов

При большом количестве классов разбейте на несколько строк или вынесите в компонент/фрагмент. В React/Vue можно собирать классы через переменные или clsx/classnames.

Кастомные значения

Для значений вне темы используйте arbitrary values: w-[347px], bg-[#1da1f2].

Чек-лист миграции

1. Установить Tailwind и настроить content
2. Добавить @tailwind директивы в CSS
3. Выбрать стратегию (постепенная/гибридная)
4. Начать с одного компонента или страницы
5. Проверить визуальное соответствие
6. Обновить тесты и скриншоты
7. Удалять старый CSS по мере переноса

Дополнительные материалы

Обзор Tailwind и его возможностей — в Tailwind CSS: руководство по утилитарному CSS-фреймворку.

---

Миграция медиа-запросов

Tailwind использует префиксы: sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px). Для кастомных брейкпоинтов добавьте их в theme.screens:

theme: {
  screens: {
    'tablet': '640px',
    'desktop': '1024px',
    'wide': '1280px',
  },
},

Работа с существующими классами

Не удаляйте старый CSS сразу. Оставляйте его до полной миграции компонента. Используйте поиск по проекту для нахождения всех использований класса перед удалением.

Миграция анимаций

Tailwind поддерживает animate-* и transition-*. Кастомные анимации добавляются в theme.animation и theme.transition. Keyframes задаются в theme.extend.keyframes.

Тестирование после миграции

• Визуальная регрессия: сравните скриншоты до и после
• E2E-тесты: проверьте интерактивные сценарии
• Проверка в разных браузерах и размерах экрана

Миграция BEM и модульного CSS

При переходе с BEM или CSS Modules замените классы на Tailwind-утилиты. Имена типа block__element--modifier больше не нужны — стили инлайнятся в разметке. Сохраняйте семантику через HTML-структуру и ARIA.

Миграция Bootstrap и других фреймворков

Bootstrap-классы имеют прямые аналоги в Tailwind: d-flex → flex, p-3 → p-3, text-center → text-center. Таблица соответствий ускоряет замену. Компоненты (модалки, дропдауны) потребуют переписывания или замены на Headless UI, Radix и т.п.

Обработка !important

Если старый CSS использовал !important, в Tailwind применяйте модификатор !: !text-red-500. Старайтесь устранить необходимость в important — часто это признак конфликта специфичности.

Миграция в команде

• Согласуйте порядок классов (например, layout → spacing → typography → colors → states)
• Используйте Prettier с плагином для сортировки Tailwind-классов
• Проводите код-ревью миграции для единообразия