Конвертер CSS в Tailwind: правила онлайн
Этот конвертер CSS в Tailwind читает блок CSS-правил и сопоставляет объявления с утилитами Tailwind. Когда именованной утилиты нет, используется синтаксис произвольных значений, например w-[137px]; объявления, которые не удаётся сопоставить, перечисляются, а не молча отбрасываются. Выберите Tailwind v3 или v4 под ваш проект, затем скопируйте преобразованный результат для проверки и использования.
Конвертер CSS в Tailwind читает блок CSS-правил и сопоставляет его объявления с утилитами Tailwind. Используйте его, чтобы конвертировать CSS в Tailwind онлайн, когда нужно проверить эквиваленты утилит без ручного поиска каждого объявления. Результат различает объявления, сопоставленные с именованной утилитой, и значения, требующие синтаксиса произвольных значений, например w-[137px].
Выберите Tailwind v3 или v4 под версию вашего проекта. Конвертер использует синтаксис произвольных значений для объявлений без именованной утилиты и перечисляет объявления, которые не удаётся сопоставить, чтобы они не терялись молча. Его таблица сопоставлений живёт в одном модуле данных, а не разбросана по логике преобразования.
CSS-правила выражают стили через объявления, а Tailwind применяет стили через классы-утилиты. Преобразование блока правил помогает при переносе существующих стилей в Tailwind или проверке того, как объявление можно представить утилитами. Селектор версии и список несопоставленного облегчают сверку результата с потребностями проекта.
Конвертер работает полностью в вашем браузере: ввод обрабатывается на вашем устройстве и не загружается, не сохраняется и не отправляется на сервер. Он работает офлайн после загрузки страницы, так что можно продолжать конвертировать без соединения. Инструмент бесплатен, и для его использования не нужно ничего устанавливать локально.
Разработчики и DevOps-инженеры могут использовать конвертер для быстрых проверок CSS в Tailwind — как новички в Tailwind, так и те, кто поддерживает существующий проект. Вставьте или введите блок CSS-правил, выберите версию Tailwind, проверьте сопоставленные и несопоставленные объявления и скопируйте результат.
Шаг 1: Вставьте или введите блок CSS-правил. Конвертер читает его объявления и сопоставляет их с утилитами Tailwind.
Шаг 2: Выберите Tailwind v3 или v4. Выберите версию, соответствующую проекту Tailwind, над которым вы работаете.
Шаг 3: Конвертируйте CSS. Результат использует именованные утилиты там, где они есть, и синтаксис произвольных значений для значений без именованной утилиты.
Шаг 4: Проверьте несопоставленные объявления. Просмотрите список, чтобы увидеть, какие объявления не были преобразованы.
Шаг 5: Скопируйте результат. Проверьте сгенерированные утилиты перед использованием в проекте.
Пример использования: Конвертируйте блок CSS-правил в утилиты Tailwind в процессе миграции. Список несопоставленного помогает выявить объявления, требующие дополнительного внимания.
Пример использования: Проверьте, как конкретное CSS-объявление отображается в утилиту Tailwind. Синтаксис произвольных значений может представлять значения без именованной утилиты.
Пример использования: Сравните результаты конвертации для Tailwind v3 и v4. Выберите версию, соответствующую обновляемому проекту.
Пример использования: Выполните рутинную конвертацию CSS в Tailwind без локальной установки. Вставьте блок правил в браузерный инструмент и скопируйте результат.
Пример использования: Работайте над конвертацией с любой машины. Инструмент работает в вашем браузере и может продолжать работать офлайн после загрузки страницы.
Пример использования: Конвертируйте внутренний CSS, не отправляя его стороннему сервису. Ввод обрабатывается в вашем браузере и не отправляется на сервер.