Вы обновляете tailwindcss до v4, и сборка останавливается с ошибкой "It looks like you're trying to use tailwindcss directly as a PostCSS plugin". Вы исправляете это, и теперь переключатель тёмной темы ничего не делает, потому что v4 никогда не загружает ваш tailwind.config.js, каждый оверлей с bg-opacity-50 стал непрозрачным, а компонент Vue с @apply падает с ошибкой "Cannot apply unknown utility class". Этот навык за один проход находит такие остатки и другие проблемы из списка ниже и подсказывает, как исправить каждую из них.

Ваш агент запускает сканер для ваших файлов package.json, конфигураций PostCSS и Vite, файлов tailwind.config, browserslist, таблиц стилей (CSS, Sass, Less, Stylus), компонентов Vue, Svelte и Astro с их блоками стилей, React и другого кода на JavaScript или TypeScript, а также HTML-подобных шаблонов (Blade, ERB, Twig, Liquid, Nunjucks и другие). Он определяет версию Tailwind CSS каждого приложения по его package.json, поэтому монорепозиторий, в котором одно приложение ещё на v3, проверяется по отдельности для каждого приложения, а код v3 не отмечается, пока это приложение не обновится. Он читает имена классов из атрибутов class и className, привязок классов в Vue, Angular и Astro, cn(), clsx(), cva(), twMerge() и @apply и пропускает комментарии, примеры кода, node_modules, результаты сборки и сгенерированный CSS. Он никогда не запускает сборку и ничего не устанавливает. Результат: BLOCK, REVIEW или NOT FLAGGED с указанием файла, строки, причины и более безопасного подхода, а каждое правило ссылается на соответствующую официальную документацию Tailwind CSS. Секреты никогда не выводятся.

Что проверяется

BLOCK (исправить до публикации)

• T01: tailwindcss, используемый как плагин PostCSS или Vite (в том числе в поле postcss в package.json), tailwindcss/nesting, а также скрипты, запускающие команду tailwindcss из v3 без @tailwindcss/cli
• T02: @tailwind base и components, @screen, screen() и импорты tailwindcss/base или tailwindcss/components
• T03: tailwind.config.js, который не загружается ни одной директивой @config и настройки которого пока не имеют аналога в CSS (darkMode, plugins, пути content, prefix, presets), а также параметры safelist, corePlugins и separator, которые v4 не поддерживает
• T04: классы bg-, text-, border-, divide-, ring- и placeholder-opacity, а также CSS-переменные в квадратных скобках, например bg-[--brand]
• T05: @apply утилит темы, включая ваши собственные цвета, шрифты и брейкпоинты из @theme, в блоках стилей Vue, Svelte или Astro, CSS-модулях, стилях компонентов Angular и таблицах стилей, импортируемых из кода компонентов, без @reference; а также @apply классов, определённых в @layer вместо @utility

REVIEW (проверить до релиза)

• T11: приложения, которые используют Tailwind CSS, но ещё не перешли на v4 (v3 в package.json, Play CDN из v3 или версия не найдена)
• T12: классы, которые всё ещё работают, но выглядят иначе или устарели: ring, outline-none без стиля фокуса, shadow-sm, rounded-sm и blur-sm в проекте, который всё ещё использует голые имена этих шкал из v3, flex-grow, flex-shrink, overflow-ellipsis, decoration-slice и decoration-clone
• T13: границы без цвета (теперь это цвет текста, а не серый), если никакой базовый стиль не возвращает прежний цвет
• T14: theme() с точечным путём из v3, например theme(colors.gray.200)
• T15: собственные классы в @layer utilities (в v4 у них нет вариантов hover:, md: или dark:)
• T16: целевые браузеры старше Safari 16.4, Chrome 111 или Firefox 128 в browserslist или build.target Vite, а также @vitejs/plugin-legacy
• T17: плагины Tailwind в package.json без строки @plugin, плагины container-queries и line-clamp, которые встроены в v4, а также Flowbite или Preline без строки @source
• T18: at-правила Tailwind v4 в файлах Sass, Less или Stylus
• T19: tailwind.config.js, который ничем не загружается и выглядит как остаток (его настройки уже находятся в @theme, @custom-variant, @plugin или @source, либо он содержит только значения темы)

Что входит в комплект

• Сканер (Python 3.9+, только стандартная библиотека)
• Руководство по правилам с причиной, более безопасным подходом и ссылкой на официальный источник для каждого правила
• Рискованный и безопасный примеры проектов (витрина магазина на Vue в процессе обновления, рядом с которой находятся админ-приложение на v3 и оставшаяся конфигурация документации), а также реальный отчёт сканера по рискованному примеру

Ограничения

Сканер читает текст файлов и не запускает Tailwind, поэтому классы, формируемые во время выполнения (конкатенация строк, значения из CMS), и итоговые значения загружаемой JS-конфигурации не видны. Изменения prefix, модификатора important, порядка вариантов, space-between и градиентов не проверяются, а версия берётся из диапазона в package.json, а не из lock-файла. Правила об изменившемся значении классов, границах, плагинах и оставшейся конфигурации являются подсказками, которые нужно подтвердить в браузере. NOT FLAGGED не является гарантией.

Содержимое

Один ZIP-файл с 30 файлами: SKILL.md, сканер в scripts/ (6 файлов Python), references/rules.md (каждое правило с причиной и более безопасным подходом) и examples/ (21 файл примеров и report.md, реальный вывод сканера по рискованному примеру).

Как использовать: это навык для агента: папка с файлом SKILL.md и скриптами Python, которые может запускать ИИ-агент для программирования, например Claude Code, Cursor или Codex CLI. Распакуйте архив в папку навыков вашего агента (для Claude Code: ~/.claude/skills/), затем попросите агента проверить ваш проект. Скрипты также работают самостоятельно с Python 3.9 или новее, ничего устанавливать не нужно. Они только читают ваши файлы: никакого доступа к сети, ничего никуда не отправляется.