Конвертер CSS в Tailwind
Конвертируйте простые объявления CSS (display: flex, padding: 16px, color: #ffffff) в ближайшие утилиты Tailwind CSS, с fallback на синтаксис arbitrary-value, когда нет точного совпадения токена.
Ввод
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-to-tailwind-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"cssInput": "display: flex;\npadding: 16px;\njustify-content: c…"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-to-tailwind-converter` tool (CSS to Tailwind Converter) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-to-tailwind-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Конвертер CSS в Tailwind — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Tailwind CSS создает интерфейсы из небольших многократно используемых служебных классов вместо написанных вручную таблиц стилей — p-4 вместо padding: 16px;, flex items-center justify-between вместо правила display: flex с еще тремя строками ниже. Если вы переносите существующую таблицу стилей в Tailwind или у вас просто есть фрагмент CSS из инструмента проектирования и вы хотите эквивалент Tailwind, повторное вводу каждого объявления вручную — это скучно и легко ошибиться. Этот инструмент автоматически преобразует простые объявления CSS в их ближайшие служебные классы Tailwind.
Как это работает
Вставьте объявления CSS — либо простые пары property: value;, либо полный блок правила .selector { ... } (селектор и скобки удаляются автоматически) — и инструмент проходит через каждое объявление и преобразует его в класс Tailwind:
- Прямые свойства ключевых слов (
display,position,flex-direction,text-align,cursorи многие другие) прямо отображаются на их имя Tailwind, например,display: flex→flex,position: relative→relative. - Свойства интервала (
margin,padding,gap,width,height,top/right/bottom/leftи их варианты для каждой стороны) сравниваются со стандартной шкалой интервала Tailwind — шкала с шагом в четверть rem (4px), где16px— ровно4единицы, поэтомуpadding: 16pxстановитсяp-4. Сокращенные значения (margin: 0 auto,padding: 8px 16px) разворачиваются в наименьший набор совпадающих классов (mx-auto,px-4 py-2и т. д.). - Цвета (
color,background-color,border-color) сравниваются со всей стандартной палитрой Tailwind (slate, gray, zinc, red, orange, ... до stone, все оттенки 50–950). Точное совпадение hex становитсяtext-blue-500; все остальное выпадает в класс arbitrary-value, напримерtext-[#123456]. - Размер шрифта, толщина шрифта, высота строки, межбуквенный интервал, радиус границы, непрозрачность, z-index, тень блока, переходы и многое другое сравниваются с их соответствующими шкалами Tailwind таким же образом.
- Все, что не имеет прямой утилиты Tailwind (необычное свойство, значение вне всех шкал), выпускается как встроенный комментарий
/* property: value - No direct Tailwind equivalent */со списком классов, поэтому ничего не теряется молча.
Результатом является единственная строка классов, разделенных пробелом (плюс любые резервные комментарии) в том же порядке, что и ваши входные объявления — готовые к вставке в атрибут class/className.
Как это использовать
- Вставьте объявления CSS или полный блок правила в поле ввода.
- Список классов Tailwind генерируется автоматически по мере ввода.
- Скопируйте результат или загрузите его как текстовый файл.
FAQ
Охватывает ли это все свойства CSS? Нет — это преобразование по лучшим усилиям, охватывающее свойства, для которых Tailwind имеет прямые утилиты (layout, flexbox/grid, интервал, типография, цвета, границы, эффекты, переходы). Свойства без эквивалента Tailwind оставляются как пояснительный комментарий, а не предполагаются.
Почему мой цвет становится text-[#123456] вместо именованного класса?
Только значения hex, которые точно совпадают с одним из оттенков стандартной палитры Tailwind, разрешаются в именованный класс (text-blue-500 и т. д.). Любое другое значение hex или RGB использует синтаксис arbitrary-value Tailwind, который представляет собой допустимый CSS в имени класса и работает без каких-либо изменений конфигурации.
Учитывает ли это пользовательский tailwind.config.js?
Нет — преобразования основаны на шкалах темы по умолчанию Tailwind. Если ваш проект настроил шкалу интервала, цвета или размера шрифта, некоторые предложенные классы могут не соответствовать вашей конфигурации; используйте резервный arbitrary-value для них и отрегулируйте собственными токенами.
Мой CSS отправляется куда-либо? Нет — все выполняется локально в вашем браузере (или при вызове через API только в обработчике запроса). Ничего не сохраняется.