CSS → утилитарные классы Tailwind
Приватность по умолчанию — работает полностью в вашем браузере
Слева вставьте CSS-декларации, справа скопируйте классы Tailwind. Конвертер привязывает стандартные шкалы spacing, цвета, типографики и раскладки к нативным утилитам и сваливается в нотацию с квадратными скобками для любого значения, которого Tailwind не знает «из коробки».
Поддерживаемые свойства
Конвертер охватывает повседневное поле CSS: spacing для padding и margin, размеры и насыщенности шрифта, цвет (text и bg), display, направление и выравнивание flex, border-radius, width и height, position, gap. Каждое из них уходит в каноничный сокращённый класс Tailwind — p-4, text-lg, justify-between — и итог читается как написанный руками Tailwind.
Зачем нужна arbitrary-нотация
Боевой код часто опирается на значения без шорткатов: кастомный шрифт 13px, бренд-цвет с конкретным hex, gap 1.7rem. В таких случаях конвертер выдаёт arbitrary-форму Tailwind — text-[13px] или bg-[#3b82f6]. Класс остаётся валидным Tailwind, JIT его обрабатывает, и round-trip через Tailwind-to-CSS проходит чисто.
Когда декларация просто проходит насквозь
Сложные селекторы, анимации, градиенты и keyframes намеренно не конвертируются — это слой, который Tailwind закрывает плагинами или @apply, и эвристическое соответствие солгало бы о корректности. Эти декларации остаются дословно внутри arbitrary-классов [prop:value], так что вы их сохраняете для ревью без потери данных.
Часто задаваемые вопросы
- Какие CSS-свойства распознаются?
- Шкала spacing для padding и margin, цвета текста и фона, display, выравнивание flex, размеры и насыщенности шрифта, border-radius, width и height, position и gap. Остальное уходит в arbitrary-класс [prop:value].
- А если значения нет в стандартной шкале?
- Конвертер выдаёт arbitrary-нотацию вроде p-[13px] или bg-[#3b82f6]. JIT их компилирует, и класс остаётся валидным Tailwind без ручной правки.
- Понимает ли он кастомные CSS-переменные?
- Да. Значения var(--token) проходят в скобках. Сам токен по-прежнему нужно объявить в теме tailwind.config или как custom property в :root.
- Преобразование без потерь?
- На типичных паттернах — да. Анимации, градиенты и экзотические селекторы остаются arbitrary-классами — они переживают конверсию, но иногда удобнее держать оригинальный CSS.
- Можно ли round-trip с Tailwind-to-CSS?
- В большинстве случаев — да. Простые утилиты возвращаются один в один, arbitrary-значения сохраняются, но неподдерживаемые декларации остаются arbitrary и на обратном пути.
- Что-то загружается?
- Нет. Вся конверсия идёт в этой вкладке браузера; содержимое таблицы стилей не покидает страницу.