Введите данные и нажмите «Сгенерировать»

Как перевести CSS-правила в классы Tailwind

Инструмент пытается сопоставить простые CSS-правила с утилитарными классами Tailwind для быстрой миграции стилей.

Как быстро перевести старый CSS-файл в классы Tailwind?

Вставьте CSS-правило целиком (например, `.btn{padding:10px;border-radius:4px}`) в поле ввода — инструмент вернёт ближайшие utility-классы Tailwind (`p-2.5 rounded`) с кратким пояснением соответствия.

Что делать, если конвертер не находит точного эквивалента свойству?

Для нестандартных значений (например, произвольных цветов или размеров) Tailwind поддерживает произвольные значения в квадратных скобках — `w-[137px]`; если инструмент не подобрал класс, используйте такую запись вручную.

Можно ли конвертировать CSS с media-запросами?

Да, правила внутри `@media` пытаются преобразоваться в классы с префиксами брейкпоинтов (`md:`, `lg:`), но сложные условия медиа-запросов стоит проверить вручную после конвертации.

Способы мигрировать CSS на Tailwind

Способ Скорость Точность
ИИ-конвертер (этот инструмент) Секунды на правило Хорошо для простых правил, нужна проверка сложных
Ручной перевод по документации Tailwind Минуты на правило Высокая, но трудозатратно на больших файлах
Постепенный рефакторинг компонент за компонентом Недели на проект Высокая, минимальный риск регрессий
Оставить как есть + Tailwind поверх Без миграции Нет конфликтов, но растёт объём CSS

Как использовать

  • 1

    Вставьте CSS

    Вставьте правила CSS, которые нужно преобразовать.

  • 2

    Отредактируйте результат

    Проверьте сгенерированные классы и при необходимости скорректируйте их вручную.

FAQ