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. Код не сохраняется и не добавляется в ссылку страницы.

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

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

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

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

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

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

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