Ви оновлюєте 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 або новішим, нічого встановлювати не потрібно. Вони лише читають ваші файли: жодного доступу до мережі, нічого нікуди не надсилається.