Actualizas tailwindcss a v4 y la compilación se detiene con "It looks like you're trying to use tailwindcss directly as a PostCSS plugin". Lo arreglas, y ahora el interruptor de modo oscuro no hace nada porque v4 nunca carga tu tailwind.config.js, cada overlay con bg-opacity-50 es opaco y el componente de Vue con @apply falla con "Cannot apply unknown utility class". Esta skill encuentra esos restos y los demás que se enumeran abajo en una sola pasada, y te indica cómo corregir cada uno.

Tu agente ejecuta un escáner sobre tus archivos package.json, las configuraciones de PostCSS y Vite, los archivos tailwind.config, browserslist, las hojas de estilo (CSS, Sass, Less, Stylus), los componentes de Vue, Svelte y Astro con sus bloques de estilo, React y otro código JavaScript o TypeScript, y las plantillas de tipo HTML (Blade, ERB, Twig, Liquid, Nunjucks y más). Determina la versión de Tailwind CSS de cada app a partir de su package.json, de modo que un monorepo con una app aún en v3 se revisa app por app, y el código v3 no se señala hasta que esa app se actualice. Lee los nombres de clase de los atributos class y className, de los enlaces de clase de Vue, Angular y Astro, de cn(), clsx(), cva(), twMerge() y @apply, y omite comentarios, ejemplos de código, node_modules, resultados de compilación y CSS generado. Nunca ejecuta una compilación ni instala nada. Devuelve BLOCK, REVIEW o NOT FLAGGED, con el archivo, la línea, el motivo y un enfoque más seguro, y cada regla enlaza a la documentación oficial de Tailwind CSS en la que se basa. Los secretos nunca se muestran.

Qué comprueba

BLOCK (corregir antes de publicar)

• T01: tailwindcss usado como plugin de PostCSS o Vite (también en el campo postcss de package.json), tailwindcss/nesting y scripts que ejecutan el comando tailwindcss de v3 sin @tailwindcss/cli
• T02: @tailwind base y components, @screen, screen() e importaciones de tailwindcss/base o tailwindcss/components
• T03: un tailwind.config.js que ningún @config carga y cuyos ajustes aún no tienen equivalente en CSS (darkMode, plugins, rutas de content, prefix, presets), y las opciones safelist, corePlugins y separator, que v4 no admite
• T04: clases bg-, text-, border-, divide-, ring- y placeholder-opacity, y variables CSS entre corchetes como bg-[--brand]
• T05: @apply de utilidades del tema, incluidos tus propios colores, fuentes y breakpoints de @theme, en bloques de estilo de Vue, Svelte o Astro, módulos CSS, estilos de componentes de Angular y hojas de estilo importadas desde el código de componentes, sin @reference; y @apply de clases definidas en @layer en lugar de @utility

REVIEW (revisar antes del lanzamiento)

• T11: apps que usan Tailwind CSS pero aún no están en v4 (v3 en package.json, el Play CDN de v3 o ninguna versión encontrada)
• T12: clases que siguen funcionando pero se ven distinto o están obsoletas: ring, outline-none sin estilo de foco, shadow-sm, rounded-sm y blur-sm en un proyecto que todavía usa los nombres simples de v3 de esas escalas, flex-grow, flex-shrink, overflow-ellipsis, decoration-slice y decoration-clone
• T13: bordes sin color (ahora el color del texto en lugar de gris) cuando ningún estilo base restaura el color anterior
• T14: theme() con la ruta con puntos de v3, como theme(colors.gray.200)
• T15: clases personalizadas en @layer utilities (sin variantes hover:, md: o dark: en v4)
• T16: navegadores objetivo anteriores a Safari 16.4, Chrome 111 o Firefox 128 en browserslist o en build.target de Vite, y @vitejs/plugin-legacy
• T17: plugins de Tailwind en package.json sin línea @plugin, los plugins container-queries y line-clamp que v4 ya incluye, y Flowbite o Preline sin línea @source
• T18: at-rules de Tailwind v4 en archivos Sass, Less o Stylus
• T19: un tailwind.config.js que nada carga y que parece un resto (sus ajustes ya están en @theme, @custom-variant, @plugin o @source, o solo contiene valores del tema)

Qué incluye

• El escáner (Python 3.9+, solo biblioteca estándar)
• Una guía de reglas con el motivo, el enfoque más seguro y un enlace a la fuente oficial de cada regla
• Un proyecto de ejemplo arriesgado y otro seguro (una tienda en Vue a mitad de la actualización, junto a una app de administración en v3 y una configuración de documentación sobrante), y el informe real que produce el escáner sobre el arriesgado

Límites

Lee el texto de los archivos y no ejecuta Tailwind, por lo que no ve las clases construidas en tiempo de ejecución (concatenación de cadenas, valores de un CMS) ni lo que resuelve una configuración JS cargada. No se comprueban los cambios en prefix, el modificador important, el orden de variantes, space-between ni los degradados, y la versión se toma del rango de package.json, no del archivo de bloqueo. Las reglas sobre significado cambiado, bordes, plugins y configuración sobrante son indicios que conviene confirmar en el navegador. NOT FLAGGED no es una garantía.

Contenido

Un archivo ZIP con 30 archivos: SKILL.md, el escáner en scripts/ (6 archivos Python), references/rules.md (cada regla con su motivo y un enfoque más seguro) y examples/ (21 archivos de ejemplo más report.md, la salida real del escáner sobre el ejemplo arriesgado).

Cómo usarlo: esta es una skill para agentes: una carpeta con un archivo SKILL.md y scripts de Python que un agente de programación con IA como Claude Code, Cursor o Codex CLI puede ejecutar. Descomprímela en la carpeta de skills de tu agente (para Claude Code: ~/.claude/skills/) y luego pide a tu agente que revise tu proyecto. Los scripts también funcionan por sí solos con Python 3.9 o posterior, sin nada que instalar. Solo leen tus archivos: sin acceso a la red, y no se envía nada a ningún sitio.