Как пользоваться: Конвертер CSS в Tailwind
- Вставьте правила CSS (с селекторами) или только объявления.
- Просмотрите список классов, сгенерированный для каждого селектора.
- Скопируйте классы в HTML или JSX. Проверьте произвольные значения и, где это уместно, замените их токенами из темы.
Как сопоставляются значения
Стандартная шкала отступов Tailwind использует шаг 0.25 rem (4 px), поэтому padding: 16px становится p-4, а margin: 0 auto становится my-0 mx-auto. Значения, которых нет на шкале, записываются с помощью синтаксиса произвольных значений: padding: 13px → p-[13px]. Типографика, радиусы и веса переходят в именованные шаги:
| CSS | Tailwind |
|---|---|
display: flex; flex-direction: column | flex flex-col |
gap: 16px | gap-4 |
font-size: 24px; font-weight: 700 | text-2xl font-bold |
border-radius: 12px | rounded-xl |
background-color: #7c5cff | bg-[#7c5cff] |
width: 100% | w-full |
.btn:hover { color: #fff } | hover:text-white |
Ограничения
- Цвета становятся произвольными значениями. Затем сопоставьте их с палитрой вашей темы, например
bg-violet-500. Инструмент CSS-переменные в Tailwind поможет описать тему. - Свойства без утилиты записываются как произвольные свойства:
[mask-image:url(...)]. - Медиазапросы, сложные селекторы и анимации нужно переписывать вручную в
md:,group-hover:и конфигурацию темы. !importantпревращается в префикс!.
Для разовых значений подойдёт генератор произвольных значений Tailwind, который создаёт отдельные классы, а генератор цветов Tailwind строит полные палитры.
Также ищут как: tailwind конвертер, генератор tailwind css.
Инструменты, которые хорошо сочетаются с Конвертер CSS в Tailwind
- PX в REM конвертер — Переводите пиксели, rem и em, задав свой корневой размер шрифта, или вставьте целую таблицу стилей и преобразуйте все значения px за один раз.
- CSS Форматер — Превратите минифицированную таблицу стилей в читаемый CSS: одно свойство на строке и правильно вложенные блоки @media.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.
- Генератор CSS @keyframes — Визуальный редактор для @keyframes.
Часто задаваемые вопросы
Поддерживается ли Tailwind v4?
Да. Сгенерированные утилиты и произвольные значения работают в Tailwind v3 и v4.
Почему цвета записываются как bg-[#hex]?
Точные цвета сохраняются как произвольные значения, чтобы внешний вид не изменился. Когда у вас будет палитра, замените их цветами вашей темы.
Можно ли конвертировать медиазапросы?
Не автоматически. Конвертируйте правила внутри медиазапроса отдельно и добавьте подходящий адаптивный префикс, например
md:.Можно ли установить Конвертер CSS в Tailwind как веб-приложение и пользоваться им офлайн?
Да. Конвертер CSS в Tailwind — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.