Загрузка...
Загрузка...
Пошаговое руководство по миграции проекта с обычного CSS на Tailwind: стратегии, инструменты, типичные замены и решение частых проблем.
Бесплатные онлайн-инструменты по теме статьи
Подробное руководство по Tailwind CSS: установка, конфигурация, утилитарные классы, кастомизация и лучшие практики для веб-разработки.
CSS & ДизайнПодробное руководство по CSS Flexbox: свойства контейнера и элементов, оси, выравнивание, практические примеры и типичные паттерны вёрстки.
CSS & ДизайнПодробное руководство по CSS Grid: свойства контейнера и элементов, именованные области, авторазмещение, практические примеры и типичные паттерны.
CSS & ДизайнПолное руководство по центрированию элементов с помощью CSS Flexbox: по горизонтали, вертикали, по обеим осям, а также центрирование с учётом отступов.
Поделитесь с коллегами или изучите другие материалы блога
Миграция с обычного CSS на Tailwind — процесс постепенный. Полная замена за один раз рискованна; лучше двигаться по компонентам или страницам. В этой статье рассмотрены стратегии миграции, соответствия классов и типичные подводные камни.
Tailwind и обычный CSS могут сосуществовать. Tailwind добавляет утилиты, а глобальные стили (сброс, шрифты, переменные) остаются в CSS.
Подходит для небольших проектов. Высокий риск, требует тщательного тестирования.
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 |
| 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 |
.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>
<div class="flex flex-col p-6 bg-white rounded-lg shadow-md">
<h3 class="text-xl font-semibold mb-2">Заголовок</h3>
</div>
Если проект использует переменные (--color-primary, --spacing-unit), их можно подключить в Tailwind:
theme: {
extend: {
colors: {
primary: 'var(--color-primary)',
},
spacing: {
unit: 'var(--spacing-unit)',
},
},
},
Или постепенно заменить переменные на значения из темы Tailwind.
Глобальные стили (сброс, базовые стили для 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].
content@tailwind директивы в 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.
При переходе с BEM или CSS Modules замените классы на Tailwind-утилиты. Имена типа block__element--modifier больше не нужны — стили инлайнятся в разметке. Сохраняйте семантику через HTML-структуру и ARIA.
Bootstrap-классы имеют прямые аналоги в Tailwind: d-flex → flex, p-3 → p-3, text-center → text-center. Таблица соответствий ускоряет замену. Компоненты (модалки, дропдауны) потребуют переписывания или замены на Headless UI, Radix и т.п.
Если старый CSS использовал !important, в Tailwind применяйте модификатор !: !text-red-500. Старайтесь устранить необходимость в important — часто это признак конфликта специфичности.