Конвертер Tailwind в CSS
Раскрывает утилиты Tailwind в CSS-объявления.
Об этом инструменте
Инструмент разворачивает распространённые утилиты Tailwind в блок правил CSS. Варианты hover: и md: выносятся в примечания, поскольку для них нужен отдельный селектор или медиазапрос.
Как пользоваться
Скопируйте классы из компонента, запустите преобразование и перенесите объявления в таблицу стилей или сверьте их с токенами дизайна. Нераспознанные утилиты остаются в примечаниях.
Пример
В примере собраны обычные утилиты раскладки и отступов.
Ввод
flex items-center gap-4 p-6 rounded-lg bg-white shadow-lg text-gray-900 font-semiboldВывод
.element {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 0.5rem;
/* …mapped declarations… */
}Совет
Удобно, когда рядом с Tailwind в проекте сохраняется собственный слой CSS.
Полезно знать
Какие классы Tailwind он понимает?
Практичный набор: display и position, выравнивание flex, шкала отступов для padding, margin, gap и размеров, размер и насыщенность шрифта, border-radius, несколько теней, колонки grid, прозрачность, z-index, короткий список распространённых цветов и произвольные значения вроде w-[320px] или bg-[#38bdf8]. Всё остальное попадает в заметки, а не угадывается.
Что с hover:, md: и другими вариантами?
Они отмечаются в заметках, но не раскрываются. Для варианта нужен селектор или media query вокруг объявления, поэтому оберните их вручную в своих стилях.