Конвертер CSS в Tailwind

Преобразуйте CSS в утилитарные классы Tailwind CSS прямо в браузере.

Сводка

    Заметки конвертации

      Готово Ctrl/Cmd+Enter конвертировать · Ctrl/Cmd+Shift+C копировать вывод

      Обычные свойства CSS можно конвертировать автоматически; сложный CSS часто требует ручной проверки.

      МгновенноРезультат в браузере
      Без установкиОткройте и конвертируйте
      БесплатноБез аккаунта
      В браузереОфлайн после загрузки
      КонфиденциальноCSS остаётся на устройстве

      Расширение Chrome

      Конвертируйте CSS в боковой панели Chrome

      Установите бесплатное расширение CSS to Tailwind: вставьте CSS, конвертируйте локально и копируйте утилиты, не покидая текущую страницу.

      Добавить в Chrome — бесплатно

      Как это работает

      Конвертация выполняется локально в браузере.

      1. Вставьте CSS

        Введите стили в редактор.

      2. Разбор

        Конвертер безопасно читает селекторы и объявления.

      3. Сопоставление

        Обычные свойства становятся утилитами Tailwind.

      4. Пометки

        Сложный CSS помечается для ручной проверки.

      Типичные сценарии

      • Миграция существующих CSS-проектов
      • Изучение Tailwind CSS
      • Рефакторинг компонентов
      • Прототипирование UI
      • Обзор устаревшего CSS
      • Конвертация макетов Flexbox
      • Конвертация макетов Grid

      Загрузить пример

      Реальные примеры — карточка, кнопка, навбар, форма, Flexbox, Grid, типографика, адаптив.

      Инструменты Руководства Частые вопросы Методика

      Для доверия, не для хайпа

      Статический сайт для разработчиков. Конвертация выполняется в браузере после загрузки. Мы описываем ограничения в Методологии, держим юридические страницы в соответствии с реализацией и не выдумываем рейтинги или «100% конвертацию». Методика.

      Последний обзор контента: .

      Расширение Chrome