Что преобразуется?

Обычные утилиты Tailwind для spacing, цветов, типографики, flex и position, плюс любая arbitrary-форма [value] или [prop:value]. Варианты пока не поддерживаются.

Зачем выбирать селектор?

На выходе — одно CSS-правило. Если задать селектор заранее, вы вставите результат прямо в stylesheet без переименований и обёртки.

Поддерживаются ли responsive и hover-варианты?

Пока нет — им нужна обёртка media query или псевдокласса. Уберите префиксы md:, hover: и dark: перед вставкой; базовые утилиты возвращаются чисто.

Учитывает ли он мою тему?

Нет, мы используем стандартную шкалу. Кастомные spacing или цвета попадают в arbitrary-декларации, но CSS остаётся рабочим.

Можно ли прогнать CSS через обратный конвертер?

Да — для простых утилит round-trip полностью совпадает. Arbitrary-значения выживают, неподдерживаемые декларации остаются arbitrary-классами.

Загружается ли мой ввод?

Нет. Вся конверсия живёт в этой вкладке; Toova не видит ваши списки классов, селекторы и вывод.

Tailwind в CSS — утилиты в одно правило

Утилиты Tailwind → CSS

Приватность по умолчанию — работает полностью в вашем браузере

Вставьте список утилит Tailwind вместе с селектором — Toova соберёт соответствующее CSS-правило. Arbitrary-классы вроде p-[13px] или [grid-template-columns:1fr_2fr] разворачиваются в сырые декларации, готовые к копированию прямо в stylesheet.

Когда нужен обратный путь

Иногда вы прототипируете в Tailwind, но отдать нужно CSS — для маркетингового письма, стороннего виджета или CMS, которая Tailwind не загружает. Конвертер собирает список утилит в одно правило с вашим селектором; вставляйте без переименований и без чистки playground-разметки.

Как возвращаются arbitrary-значения

Arbitrary-классы хранят значение прямо в имени: p-[13px] — это padding: 13px, [grid-template-columns:1fr_2fr] — grid-template-columns: 1fr 2fr. Конвертер разворачивает обе формы дословно, поэтому любое значение, заданное через JIT, переживает поездку без дополнительной таблицы соответствий.

Ограничения и round-trip

Адаптивные варианты (md:flex), state-варианты (hover:bg-black) и тёмная тема (dark:text-white) требуют обёрток media query или псевдокласса, поэтому конвертер их пока не выводит — удалите перед вставкой. Темовые токены (text-brand) сваливаются на стандартную шкалу; если тема кастомная — ждите arbitrary-фолбэков. Обычные утилиты делают round-trip чисто через CSS-to-Tailwind.

Часто задаваемые вопросы

Что преобразуется?: Обычные утилиты Tailwind для spacing, цветов, типографики, flex и position, плюс любая arbitrary-форма [value] или [prop:value]. Варианты пока не поддерживаются.
Зачем выбирать селектор?: На выходе — одно CSS-правило. Если задать селектор заранее, вы вставите результат прямо в stylesheet без переименований и обёртки.
Поддерживаются ли responsive и hover-варианты?: Пока нет — им нужна обёртка media query или псевдокласса. Уберите префиксы md:, hover: и dark: перед вставкой; базовые утилиты возвращаются чисто.
Учитывает ли он мою тему?: Нет, мы используем стандартную шкалу. Кастомные spacing или цвета попадают в arbitrary-декларации, но CSS остаётся рабочим.
Можно ли прогнать CSS через обратный конвертер?: Да — для простых утилит round-trip полностью совпадает. Arbitrary-значения выживают, неподдерживаемые декларации остаются arbitrary-классами.
Загружается ли мой ввод?: Нет. Вся конверсия живёт в этой вкладке; Toova не видит ваши списки классов, селекторы и вывод.