„Копирай като Tailwind“ свързва визуалния дизайн и кода на Tailwind CSS. Кликнете върху произволен елемент на уебстраницата и незабавно получете еквивалентните Tailwind помощни класове, генерирани от неговите изчислени CSS стилове — готови за поставяне във вашия JSX, Vue шаблон или HTML файл.
Изграждането с Tailwind CSS означава да се мисли в рамките на помощни класове (utility classes), вместо да се пише персонализиран CSS. Но когато се позовавате на съществуващ дизайн — независимо дали е целева страница на конкурент, система за дизайн, изградена на чист (vanilla) CSS, или текущ уебсайт на клиент — ръчното превеждане на визуални стилове към класове на Tailwind е досадно и податливо на грешки. „Копирай като Tailwind“ напълно автоматизира това. Инструментът чете изчислените от браузъра стилове за произволен елемент и съпоставя всяко свойство до най-близкия договорен Tailwind клас, използвайки мащаба по подразбиране. Цветовете се свързват с най-близкия цвят от палитрата на Tailwind, стойностите за разстояние (spacing) прилепват към най-близката помощна програма, базирана на 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), градиенти, стилове на граници (borders), класове за оформление на flex/grid, стойности на непрозрачност (opacity) и дори свойства, свързани с адаптивност (responsive) като max-width и пропорции (aspect ratios).
Включва само класове, които се различават от настройките по подразбиране на браузъра — без излишни помощни програми. Резултатът е кратък и готов за производство (production-ready), а не претъпкан с класове за наследени стойности или стойности по подразбиране.
Копирай като 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Възстановявате уебсайт от чист (vanilla) CSS или Bootstrap към Tailwind? Използвайте инструмента върху всеки главен компонент на съществуващия сайт, копирайте класовете на Tailwind и ги превърнете в отправна точка за новите си компоненти в Tailwind. Спестява часове ръчен превод от свойства към класове.
Намерили сте красиво проектирана карта, централна секция (hero) или навигация на друг уебсайт? Кликнете върху елемента, вземете Tailwind класовете и ги използвайте като справка за изграждане на своя собствена версия. Не е необходимо ръчно да преглеждате десетки CSS свойства.
Когато изграждате нови компоненти на Tailwind от Figma или PSD макет, първо реализирайте дизайна в браузъра чрез DevTools, след това кликнете на елемента с „Копирай като Tailwind“, за да получите точните помощни класове, вместо да ги въвеждате на ръка.
Уверете се, че вашите ръчно написани CSS стойности действително съответстват на валидни стойности по мащаба на Tailwind. Ако сте написали padding: 14px, инструментът ви показва дали това се закръглява до p-3 (12px) или p-3.5 (14px) — улавяйки несъответствията преди те да стигнат до продукция.
Започвате с Tailwind? Кликвайте върху елементи в различни уебстраници, за да видите как традиционните CSS свойства се превеждат в помощни (utility) класове. Това е интерактивен начин да научите системата за именуване на класове в Tailwind, наблюдавайки реални примери.
Отворете плаващия док DevSuite Pro и щракнете върху иконата „Копирай като Tailwind“. Инструментът се активира и курсорът ви се променя в селектор тип мерник, което показва, че вече можете да кликвате върху елементи.
Кликнете върху произволен елемент на страницата — бутон, карта, заглавие, лента за навигация. Елементът се осветява и неговият изчислен CSS се анализира. Появява се плаващ панел, показващ генерирания низ от Tailwind класове.
Панелът показва пълния низ от класове на Tailwind, разделен на логически групи. Можете да видите точно кое CSS свойство е съпоставено с кой Tailwind клас. Задръжте курсора на мишката върху произволен клас, за да видите базовата CSS стойност, която представлява.
Кликнете върху бутона „Копирай“, за да вземете пълния низ от класове. Поставете го директно в className, class атрибута или шаблона на вашия компонент. Класовете работят незабавно при стандартна конфигурация на Tailwind.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.