Copy as Tailwind устраняет разрыв между визуальным дизайном и кодом Tailwind CSS. Нажмите на любой элемент веб-страницы и мгновенно получите эквивалентные классы утилит Tailwind, сгенерированные из его вычисленных CSS-стилей, — готовые к вставке в JSX, шаблон Vue или HTML-файл.
Разработка на Tailwind CSS означает мышление категориями классов утилит вместо написания пользовательского CSS. Но когда вы работаете с существующим дизайном — будь то лендинг конкурента, дизайн-система на ванильном CSS или текущий сайт клиента — ручной перевод визуальных стилей в классы Tailwind утомителен и чреват ошибками. Copy as Tailwind полностью автоматизирует этот процесс. Инструмент считывает вычисленные стили любого элемента в браузере и сопоставляет каждое свойство с ближайшим классом утилиты Tailwind по шкале по умолчанию. Цвета подбираются к ближайшему цвету палитры Tailwind, значения отступов привязываются к ближайшей утилите на основе rem, а типографика сопоставляется с классами text-* и font-*. На выходе — чистая строка классов, которую можно напрямую вставить в компонент.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
Нажмите на любой элемент, и его полные вычисленные CSS-стили будут проанализированы в реальном времени. Каждое применимое свойство сопоставляется с эквивалентным классом утилиты Tailwind — от bg-purple-600 до rounded-lg и font-semibold. Преобразование происходит мгновенно, без задержек загрузки или обработки.
Инструмент не просто выполняет замену строк — он понимает дизайн-систему Tailwind. Отступ padding в 12px соответствует p-3 (а не произвольному значению), цвета подбираются к ближайшему оттенку палитры Tailwind (например, #7c3aed становится purple-600), а размеры шрифтов сопоставляются с text-sm, text-base, text-lg и т. д.
Сгенерированная строка классов отображается в чистой панели вывода. Нажмите кнопку «Копировать» один раз, и вся строка окажется в буфере обмена — готовая к вставке в className="..." в React, class="..." в HTML или :class="..." в Vue.
Для ещё более быстрого рабочего процесса щёлкните правой кнопкой мыши на любом элементе страницы, чтобы получить доступ к «Copy as Tailwind» прямо из контекстного меню браузера. Не нужно открывать панель DevSuite — просто щёлкните правой кнопкой, нажмите, и классы окажутся в буфере обмена.
Выходит за рамки простых сопоставлений. Обрабатывает box shadows (shadow-md, shadow-lg), градиенты, стили границ, классы flex/grid-макета, значения прозрачности и даже адаптивные свойства, такие как max-width и соотношения сторон.
Включает только классы, отличающиеся от значений браузера по умолчанию — без избыточных утилит. Результат лаконичен и готов к производству, без раздувания классами для унаследованных или стандартных значений.
Копировать как Tailwind covers the following, organized by category:
display (flex, grid, block)position (relative, absolute)flex-directionjustify-contentalign-itemsgapoverflowpadding (p-*)margin (m-*)width (w-*)height (h-*)max-widthmin-heightfont-size (text-*)font-weight (font-*)line-height (leading-*)letter-spacing (tracking-*)text-aligntext-transformcolor (text-*)background-color (bg-*)border-color (border-*)opacityborder-width (border-*)border-radius (rounded-*)border-stylebox-shadow (shadow-*)transform (scale-*, rotate-*)transitioncursorПерестраиваете сайт с ванильного CSS или Bootstrap на Tailwind? Нажмите на каждый основной компонент существующего сайта, скопируйте классы Tailwind и используйте их как отправную точку для новых компонентов Tailwind. Экономит часы ручного перевода свойств в классы.
Нашли красиво оформленную карточку, блок hero или навигацию на другом сайте? Нажмите на неё, получите классы Tailwind и используйте их как ориентир для создания собственной версии. Не нужно вручную осматривать десятки CSS-свойств.
При создании новых компонентов Tailwind по макету Figma или PSD реализуйте дизайн в браузере с помощью DevTools, затем нажмите на элемент с помощью Copy as Tailwind, чтобы получить точные классы утилит вместо того, чтобы писать их вручную.
Убедитесь, что ваши CSS-значения, написанные вручную, действительно соответствуют допустимым значениям шкалы Tailwind. Если вы написали padding: 14px, инструмент покажет, округляется ли это до p-3 (12px) или p-3.5 (14px) — выявляя несоответствия до попадания в продакшн.
Только начинаете работу с Tailwind? Нажимайте на элементы любой веб-страницы, чтобы увидеть, как традиционные CSS-свойства переводятся в классы утилит. Это интерактивный способ изучить систему именования классов Tailwind на реальных примерах.
Откройте плавающую панель DevSuite Pro и нажмите иконку Copy as Tailwind. Инструмент активируется, и курсор изменится на перекрестие выбора, указывая, что теперь вы можете нажимать на элементы.
Нажмите на любой элемент страницы — кнопку, карточку, заголовок, панель навигации. Элемент выделяется, его вычисленный CSS анализируется. Появляется плавающая панель с сгенерированной строкой классов Tailwind.
Панель отображает полную строку классов Tailwind, разбитую на логические группы. Вы видите, какое CSS-свойство соответствует какому классу Tailwind. Наведите курсор на любой класс, чтобы увидеть базовое значение CSS, которое он представляет.
Нажмите кнопку «Копировать», чтобы захватить полную строку классов. Вставьте её напрямую в className вашего компонента, атрибут class или шаблон. Классы сразу же работают со стандартной конфигурацией Tailwind.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.