Помощникът за Tailwind инспектира всеки елемент на уебстраницата и генерира изчерпателна, категоризирана разбивка на съответстващите помощни (utility) класове на Tailwind CSS. За разлика от простия низ от класове, той организира резултатите по категории — Изглед (Layout), Разстояния (Spacing), Типография, Цветове, Граници (Borders) и Ефекти — така че да разберете точно какво контролира всеки клас.
Докато „Copy as Tailwind“ ви дава бърз низ от класове за поставяне (paste), Помощникът за Tailwind е инструмент за дълбоко гмуркане. Създаден е за разработчици, които искат да разберат пълната стилова композиция на даден елемент от гледна точка на Tailwind. Всяко изчислено CSS свойство се съпоставя с неговия еквивалент в Tailwind и се групира в логически категории. С един поглед можете да видите, че даден елемент използва flex оформление с подравняване items-center, има padding p-5 с gap-3 между дъщерните елементи, използва text-lg font-bold за типография и има външен вид bg-slate-900 rounded-lg border border-slate-700. Щракнете върху всеки отделен етикет на клас, за да копирате само него, или използвайте „Copy All“, за да вземете целия низ. Категоризираният изглед улеснява подбора на точно тези класове, от които се нуждаете, вместо да копирате всичко.
Класовете на Tailwind са организирани в ясни категории: Изглед (flex, grid, position), Разстояния (padding, margin, gap), Типография (font size, weight, color), Цветове (background, text, border), Граници (radius, width, style) и Ефекти (shadow, opacity, transform). Всяка категория може да се свива и е ясно обозначена.
Щракнете върху който и да е елемент — бутони, карти, заглавия, въвеждащи полета (inputs), контейнери — и панелът незабавно се попълва с пълната разбивка на Tailwind класовете. Елементът е подчертан с лилава граница, за да знаете точно какво се инспектира.
Всеки Tailwind клас се показва като етикет (tag), върху който може да се кликне. Кликнете върху който и да е отделен етикет (като p-5 или font-bold), за да копирате само този клас в клипборда си. Фина анимация „копирано“ (copied) потвърждава действието. Идеално, когато се нуждаете само от един или два конкретни класа.
Бутонът „Копирай всички класове“ (Copy All Classes) в долната част генерира изчистен, разделен с интервали низ от всички Tailwind класове и го копира в клипборда ви. Готов за директно поставяне в className="..." или class="...".
Всяка стойност е съпоставена с мащаба по подразбиране за разстояния и размери на Tailwind. Шрифт от 16px съответства на text-base, 24px padding съответства на p-6, а #7c3aed на purple-600. Когато не съществува точно съвпадение, се избира и отбелязва най-близката стойност в мащаба.
Задръжте курсора на мишката върху който и да е етикет с Tailwind клас в панела, за да видите първоначалната изчислена CSS стойност, от която е генериран. Например, задържането на курсора върху „p-5“ показва „padding: 20px“. Този двупосочен изглед ви помага да научите мащаба на Tailwind, като свързвате класовете с реални CSS стойности.
Помощник за Tailwind (Tailwind Helper) covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*За разлика от плоския низ с класове, категоризираният изглед ви позволява да разберете пълната композиция на даден елемент. Вижте, че дадена карта използва flex оформление, специфични отстояния (padding), удебелена типография (bold), slate фон, заоблени граници и лека сянка — всеки аспект в собствен раздел.
Инспектирайте добре проектиран елемент на който и да е уебсайт, след което го пресъздайте във вашия проект с Tailwind, като копирате съответните класове от категориите. Вземете оформлението (layout) от един елемент, типографията от друг и цветовете от вашата бранд палитра — смесвайте и комбинирайте.
Задръжте курсора над етикетите с класове (class tags), за да видите стойностите на изходния CSS. Това интерактивно съпоставяне е най-бързият начин да научите, че p-4 означава 16px, text-lg означава 18px или че purple-600 е #7c3aed. Превърнете всеки уебсайт в упражнение за учене на Tailwind.
Инспектирайте елементите на вашия собствен сайт, изграден с Tailwind, за да проверите дали използват последователни разстояния, цветове и типография от системата за дизайн. Забележете случайни персонализирани стойности (като p-[13px]), които трябва да бъдат стандартни стойности от мащаба (p-3 или p-3.5).
Използвайте „Copy as Tailwind“, когато имате нужда от бърз низ от класове за поставяне. Използвайте „Tailwind Helper“, когато искате да изучите разбивката, да копирате избирателно отделни класове или да разберете защо конкретни Tailwind класове са избрани за всяко CSS свойство.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Tailwind Helper. Инструментът се активира и от дясната страна се появява панел, готов да покаже разбивките на класовете.
Щракнете върху произволен елемент от страницата. Той се подчертава с лилава рамка и панелът се попълва с категоризирани класове на Tailwind. Всяка категория (Изглед, Разстояния, Типография, Цветове, Граници, Ефекти) се показва като раздел с етикети на класове.
Разгледайте категориите, за да разберете пълната стилова композиция на елемента. Всеки клас е етикет, върху който може да се щракне — задръжте курсора, за да видите изходната CSS стойност, щракнете, за да копирате съответния индивидуален клас.
Щракнете върху отделни етикети (tags), за да копирате конкретни класове, или използвайте бутона „Копирай всички класове“ (Copy All Classes) в долната част, за да вземете всичко като един низ. Поставете директно във вашия Tailwind компонент.
Щракнете върху различен елемент на страницата, за да актуализирате незабавно панела с нови класове. Няма нужда да деактивирате и активирате отново — просто продължете да щракате, за да инспектирате множество елементи последователно.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.