Tailwind Helper инспектирует любой элемент на веб-странице и генерирует полный категоризированный breakdown совпадающих Tailwind CSS utility-классов. В отличие от простой строки классов, он организует результаты по категориям — Layout, Spacing, Typography, Colors, Borders и Effects — чтобы вы точно понимали, за что отвечает каждый класс.
Пока Copy as Tailwind даёт быструю строку классов для вставки, Tailwind Helper — это его глубокий компаньон. Он создан для разработчиков, которые хотят понять полный состав стилей элемента в терминах Tailwind. Каждое вычисленное CSS-свойство сопоставляется с его Tailwind-эквивалентом и группируется по логическим категориям. Вы можете с первого взгляда увидеть, что элемент использует flex layout с выравниванием items-center, имеет padding p-5 с gap-3 между дочерними элементами, использует text-lg font-bold для типографики и имеет внешний вид bg-slate-900 rounded-lg border border-slate-700. Нажмите на любой отдельный тег класса, чтобы скопировать только его, или используйте «Copy All» для получения полной строки. Категоризированный вид позволяет легко выбрать именно те классы, которые вам нужны, а не копировать всё подряд.
Tailwind-классы организованы по чётким категориям: Layout (flex, grid, position), Spacing (padding, margin, gap), Typography (размер шрифта, насыщенность, цвет), Colors (фон, текст, border), Borders (radius, ширина, стиль) и Effects (тень, opacity, transform). Каждая категория сворачивается и имеет чёткую метку.
Нажмите на любой элемент — кнопки, карточки, заголовки, поля ввода, контейнеры — и панель мгновенно заполнится полным breakdown Tailwind-классов. Элемент выделяется фиолетовым border, чтобы вы точно знали, что именно инспектируется.
Каждый Tailwind-класс отображается в виде кликабельного тега. Нажмите на любой отдельный тег (например, p-5 или font-bold), чтобы скопировать только этот класс в буфер обмена. Ненавязчивая анимация «скопировано» подтверждает действие. Идеально, когда вам нужен только один или два конкретных класса.
Кнопка «Copy All Classes» внизу генерирует чистую строку всех Tailwind-классов, разделённых пробелами, и копирует её в буфер обмена. Готово для вставки прямо в className="..." или class="...".
Каждое значение сопоставляется со стандартной шкалой spacing и sizing в Tailwind. Шрифт 16px соответствует text-base, padding 24px — p-6, а #7c3aed — purple-600. Когда точного совпадения нет, выбирается ближайшее значение шкалы с пометкой.
Наведите курсор на любой тег Tailwind-класса в панели, чтобы увидеть исходное вычисленное CSS-значение, из которого он был сгенерирован. Например, наведение на «p-5» покажет «padding: 20px». Этот двусторонний вид помогает вам освоить шкалу Tailwind, связывая классы с реальными CSS-значениями.
Помощник Tailwind 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 layout, конкретный padding, жирную типографику, slate-фон, скруглённые borders и ненавязчивую тень — каждый аспект в отдельной секции.
Инспектируйте хорошо спроектированный элемент на любом сайте, затем воссоздайте его в вашем Tailwind-проекте, копируя классы нужных категорий. Возьмите layout из одного элемента, типографику из другого, а цвета из вашей фирменной палитры — комбинируйте по своему усмотрению.
Наводите курсор на теги классов, чтобы видеть исходные CSS-значения. Это интерактивное сопоставление — самый быстрый способ усвоить, что p-4 означает 16px, text-lg — 18px, а purple-600 — это #7c3aed. Превратите любой сайт в упражнение по изучению Tailwind.
Инспектируйте элементы на вашем собственном Tailwind-сайте, чтобы убедиться, что они используют согласованные spacing, цвета и типографику из дизайн-системы. Замечайте случайные единичные значения (например, p-[13px]), которые должны быть стандартными значениями шкалы (p-3 или p-3.5).
Используйте Copy as Tailwind, когда вам нужна быстрая строка классов для вставки. Используйте Tailwind Helper, когда хотите изучить breakdown, выборочно скопировать отдельные классы или понять, почему конкретные Tailwind-классы были выбраны для каждого CSS-свойства.
Откройте плавающую панель DevSuite Pro и нажмите иконку Tailwind Helper. Инструмент активируется, и справа появится панель, готовая отображать breakdown классов.
Нажмите на любой элемент страницы. Он выделится фиолетовым border, а панель заполнится категоризированными Tailwind-классами. Каждая категория (Layout, Spacing, Typography, Colors, Borders, Effects) отображается как секция с тегами классов.
Просматривайте категории, чтобы понять полный состав стилей элемента. Каждый класс — кликабельный тег: наведите курсор, чтобы увидеть исходное CSS-значение, нажмите — чтобы скопировать отдельный класс.
Нажимайте на отдельные теги для копирования конкретных классов или используйте кнопку «Copy All Classes» внизу, чтобы получить всё одной строкой. Вставляйте прямо в ваш Tailwind-компонент.
Нажмите на другой элемент страницы, чтобы мгновенно обновить панель с новыми классами. Нет необходимости деактивировать и повторно активировать инструмент — просто продолжайте нажимать для инспекции нескольких элементов последовательно.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.