Softonic

CSS в Tailwind

Шаг 1 / 2
Преобразовать в Tailwind

Переносить устаревшую таблицу стилей в Tailwind по одному правилу за раз утомительно. Этот конвертер принимает блок обычного CSS, с селекторами и фигурными скобками или без них, и переписывает каждую декларацию как утилиту Tailwind. Распознанные пары сопоставляются с именованными утилитами, такими как flex, items-center или rounded-lg, а всё остальное откатывается к синтаксису произвольных значений Tailwind [property:value], поэтому ничего не отбрасывается незаметно.

Как конвертер обрабатывает ваш CSS

  1. 1

    Вставьте CSS

    Вставьте полное правило вида `.card { padding: 16px; border-radius: 8px; }` или только декларации внутри фигурных скобок.

  2. 2

    Парсер удаляет комментарии

    Блочные комментарии `/* ... */` удаляются до того, как декларации разбиваются по точкам с запятой.

  3. 3

    Каждая декларация сопоставляется

    Распространённые свойства сопоставляются с реальными утилитами Tailwind (отступы, радиус, размер шрифта, flex, отображение, выравнивание текста); неизвестные откатываются к `[prop:value]`.

  4. 4

    Скопируйте и примените

    Вставьте список классов в атрибут `class` соответствующего HTML-элемента.

Что сопоставляется с именованными утилитами

Стандартная тема Tailwind не может охватить все возможные значения CSS, поэтому конвертер отдаёт приоритет тем значениям, для которых существует именованная утилита, а во всех остальных случаях использует произвольные значения.

Прямые сопоставления

Декларация CSS Утилита Tailwind
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

Сопоставления с учётом шкалы

padding, margin, width, height, а также минимальные и максимальные размеры делятся на 4, чтобы получить шаг отступа Tailwind, padding: 16px превращается в p-4, а width: 32px, в w-8. Значения, которые не попадают на ровный шаг, откатываются к произвольным значениям на соответствующей утилите; например, width: 37px становится w-[37px].

border-radius сопоставляется с ближайшей именованной утилитой (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl). Размеры больше 16px становятся rounded-full, что удобно для элементов в форме «таблетки» (pill), но неверно для необычно больших радиусов, проверьте вывод перед выпуском.

font-size распределяется по диапазону от text-xs до text-3xl на основе пороговых значений в пикселях.

На что обратить внимание

  • Псевдоклассы, медиазапросы и селекторы не переводятся; преобразуются только декларации внутри фигурных скобок. Варианты вроде hover: или md: вам по-прежнему нужно добавлять самостоятельно.
  • Цвета попадают в произвольные значения, например text-[#1f2937], поскольку конвертер не знает вашу палитру темы Tailwind. Замените их вручную на text-gray-800 или собственный токен.
  • Сокращённые свойства, которые вы используете редко (border, background, transition), выводятся дословно как [property:value], проверьте их перед выпуском.

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

В выводе используются имена утилит, стабильные как в Tailwind v3, так и в v4. Произвольные значения в квадратных скобках также действительны в обеих версиях. После вставки вы, возможно, захотите заново токенизировать цвета в палитру @theme версии v4.

У конвертера нет доступа к вашей цветовой шкале в tailwind.config.js, поэтому он выводит цвет как произвольное значение на соответствующей утилите (text-[#1f2937]). Сопоставьте его вручную с ближайшим токеном палитры, например text-gray-800 или заданным вами брендовым токеном.

Да, вставьте несколько правил. Инструмент выдаст по одному списку классов на каждый селектор, разделяя их комментарием /* selector */, чтобы вы могли сопоставить их с соответствующим HTML.

CSS отправляется на наш сервер, чтобы конвертер преобразовал его в классы Tailwind. Код не сохраняется и не добавляется в ссылку страницы.

Сопутствующие инструменты

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор бейджей README

Создавайте бейджи shields.io для файлов README на GitHub: статус сборки, версия, лицензия, число загрузок и покрытие кода. Просмотрите и скопируйте фрагмент Markdown.

Генератор случайных адресов

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

Конвертер из формата HEX в ASCII

Преобразует последовательности шестнадцатеричных байтов в текст в формате ASCII. Отлично подходит для отладки протоколов, обратного инженеринга и решений задач типа CTF.

Инструмент доступен на других языках