Sie heben tailwindcss auf v4 an, und der Build bricht mit "It looks like you're trying to use tailwindcss directly as a PostCSS plugin" ab. Sie beheben das, und nun tut der Dark-Mode-Schalter nichts mehr, weil v4 Ihre tailwind.config.js nie lädt, jedes bg-opacity-50-Overlay ist deckend, und die Vue-Komponente mit @apply scheitert mit "Cannot apply unknown utility class". Dieser Skill findet diese Überbleibsel und die weiteren unten aufgeführten in einem Durchgang und sagt Ihnen, wie Sie jedes einzelne beheben.

Ihr Agent führt einen Scanner über Ihre package.json-Dateien, PostCSS- und Vite-Konfigurationen, tailwind.config-Dateien, browserslist, Stylesheets (CSS, Sass, Less, Stylus), Vue-, Svelte- und Astro-Komponenten mit ihren Style-Blöcken, React und anderen JavaScript- oder TypeScript-Code sowie HTML-ähnliche Templates (Blade, ERB, Twig, Liquid, Nunjucks und weitere) aus. Er ermittelt die Tailwind-CSS-Version jeder App aus ihrer package.json, sodass ein Monorepo, in dem eine App noch auf v3 ist, pro App geprüft wird und v3-Code erst gemeldet wird, wenn diese App aktualisiert wird. Er liest Klassennamen aus class- und className-Attributen, Klassenbindungen in Vue, Angular und Astro, cn(), clsx(), cva(), twMerge() und @apply und überspringt Kommentare, Codebeispiele, node_modules, Build-Ausgaben und generiertes CSS. Er führt niemals einen Build aus und installiert nichts. Er liefert BLOCK, REVIEW oder NOT FLAGGED mit Datei, Zeile, Grund und einem sichereren Ansatz, und jede Regel verlinkt die zugrunde liegende offizielle Tailwind-CSS-Dokumentation. Secrets werden nie ausgegeben.

Was geprüft wird

BLOCK (vor der Auslieferung beheben)

• T01: tailwindcss als PostCSS- oder Vite-Plugin verwendet (auch im Feld postcss der package.json), tailwindcss/nesting sowie Skripte, die den v3-Befehl tailwindcss ohne @tailwindcss/cli ausführen
• T02: @tailwind base und components, @screen, screen() und Importe von tailwindcss/base oder tailwindcss/components
• T03: eine tailwind.config.js, die von keinem @config geladen wird und deren Einstellungen noch kein CSS-Gegenstück haben (darkMode, plugins, content-Pfade, prefix, presets), sowie die Optionen safelist, corePlugins und separator, die v4 nicht unterstützt
• T04: bg-, text-, border-, divide-, ring- und placeholder-opacity-Klassen sowie CSS-Variablen in eckigen Klammern wie bg-[--brand]
• T05: @apply von Theme-Utilities, einschließlich Ihrer eigenen @theme-Farben, -Schriften und -Breakpoints, in Style-Blöcken von Vue, Svelte oder Astro, CSS-Modulen, Angular-Komponentenstilen und aus Komponentencode importierten Stylesheets ohne @reference; sowie @apply von Klassen, die in @layer statt mit @utility definiert sind

REVIEW (vor dem Release prüfen)

• T11: Apps, die Tailwind CSS verwenden, aber noch nicht auf v4 sind (v3 in package.json, das v3-Play-CDN oder keine Version gefunden)
• T12: Klassen, die noch funktionieren, aber anders aussehen oder veraltet sind: ring, outline-none ohne Fokus-Stil, shadow-sm, rounded-sm und blur-sm in einem Projekt, das noch die einfachen v3-Namen dieser Skalen verwendet, flex-grow, flex-shrink, overflow-ellipsis, decoration-slice und decoration-clone
• T13: Rahmen ohne Farbe (jetzt die Textfarbe statt Grau), wenn kein Basisstil die alte Farbe wiederherstellt
• T14: theme() mit dem v3-Punktpfad, etwa theme(colors.gray.200)
• T15: eigene Klassen in @layer utilities (in v4 ohne die Varianten hover:, md: oder dark:)
• T16: Browser-Ziele älter als Safari 16.4, Chrome 111 oder Firefox 128 in browserslist oder Vite build.target sowie @vitejs/plugin-legacy
• T17: Tailwind-Plugins in package.json ohne @plugin-Zeile, die Plugins container-queries und line-clamp, die in v4 bereits eingebaut sind, sowie Flowbite oder Preline ohne @source-Zeile
• T18: At-Regeln von Tailwind v4 in Sass-, Less- oder Stylus-Dateien
• T19: eine tailwind.config.js, die von nichts geladen wird und wie ein Überbleibsel aussieht (ihre Einstellungen stehen bereits in @theme, @custom-variant, @plugin oder @source, oder sie enthält nur Theme-Werte)

Was enthalten ist

• Der Scanner (Python 3.9+, nur Standardbibliothek)
• Ein Regelhandbuch mit Grund, sichererem Ansatz und einem Link zur offiziellen Quelle für jede Regel
• Ein riskantes und ein sicheres Beispielprojekt (eine Vue-Storefront mitten im Upgrade, daneben eine v3-Admin-App und eine übrig gebliebene Docs-Konfiguration) sowie der echte Bericht, den der Scanner für das riskante erzeugt

Grenzen

Er liest den Text der Dateien und führt Tailwind nicht aus, daher werden zur Laufzeit gebildete Klassen (String-Verkettung, Werte aus einem CMS) und das, wozu eine geladene JS-Konfiguration aufgelöst wird, nicht erkannt. Änderungen an prefix, important-Modifikator, Variantenreihenfolge, space-between und Verläufen werden nicht geprüft, und die Version stammt aus dem Bereich in package.json, nicht aus der Lock-Datei. Die Regeln zu geänderter Bedeutung, Rahmen, Plugins und übrig gebliebener Konfiguration sind Hinweise, die im Browser bestätigt werden sollten. NOT FLAGGED ist keine Garantie.

Inhalt

Eine ZIP-Datei mit 30 Dateien: SKILL.md, der Scanner in scripts/ (6 Python-Dateien), references/rules.md (jede Regel mit Grund und sichererem Ansatz) und examples/ (21 Beispieldateien plus report.md, die echte Scanner-Ausgabe für das riskante Beispiel).

So verwenden Sie es: Dies ist ein Agent-Skill: ein Ordner mit einer SKILL.md-Datei und Python-Skripten, die ein KI-Coding-Agent wie Claude Code, Cursor oder Codex CLI ausführen kann. Entpacken Sie ihn in den Skills-Ordner Ihres Agenten (für Claude Code: ~/.claude/skills/) und bitten Sie dann Ihren Agenten, Ihr Projekt zu prüfen. Die Skripte laufen auch eigenständig mit Python 3.9 oder neuer, ohne dass etwas installiert werden muss. Sie lesen nur Ihre Dateien: kein Netzwerkzugriff, und nichts wird irgendwohin gesendet.