| name | kdd-tailwind |
| description | Verifica proyectos de Tailwind CSS v4 contra 10 tecnicas: instalacion del plugin, preprocesadores, @reference, utilidades removidas o en conflicto, modificador important, mobile-first, theme variables, namespace de color, y clases dinamicas. Usala cuando el usuario pida revisar, auditar o migrar un proyecto de Tailwind CSS. |
KDD Tailwind CSS Checker
Extraido de una selección curada de 13 páginas de tailwindcss.com/docs
("Getting started" + "Core concepts") con el método Knowledge-Driven Development
(kdd-book). El sitio completo tiene ~210 páginas, y ~195 son referencia de clases CSS (z-index,
flex-basis...) sin técnica que prescribir — por eso el triaje no fue un volcado literal, sino una
selección a mano de las páginas que sí prescriben algo. El porcentaje que da esta fuente no es
comparable al de un volcado completo: mide la fracción contractable de la selección, no del sitio.
Flujo
-
Encontrá los archivos relevantes: vite.config.ts/package.json (instalación,
preprocesadores), HTML/JSX con clases de Tailwind (utilidades, mobile-first, clases dinámicas),
CSS con @theme/@apply/@variant (theme variables, namespace de color, @reference).
-
Corré los chequeos relevantes para lo que el usuario quiera auditar:
python scripts/tailwind_checks.py --rule instalacion <vite.config.ts>
python scripts/tailwind_checks.py --rule preprocesadores <package.json>
python scripts/tailwind_checks.py --rule referencia <archivo.css>
python scripts/tailwind_checks.py --rule utilidades-removidas <archivo.html>
python scripts/tailwind_checks.py --rule modificador-important <archivo.html>
python scripts/tailwind_checks.py --rule utilidades-en-conflicto <archivo.html>
python scripts/tailwind_checks.py --rule mobile-first <archivo.html>
python scripts/tailwind_checks.py --rule theme-variables <archivo.css>
python scripts/tailwind_checks.py --rule namespace-color <archivo.css>
python scripts/tailwind_checks.py --rule clases-dinamicas <archivo.jsx>
Exit 0 (cumple), 1 (no cumple, con archivo:línea:detalle) o 2 (no se pudo verificar).
-
Reportá cada regla corrida con [PASSED] / [FAILED] / [NO VERIFICABLE].
-
Para el resto de las 21 técnicas identificadas en la selección curada, consultá
scripts/knowledge.json. Cada nodo trae pile (A=medible, B=juicio real sin umbral,
C=referencia), title, description y, si es B, un why_not.
Reglas medibles (pila A)
| Regla | Qué mide |
|---|
instalacion | El plugin oficial y el import de Tailwind están declarados en la config de Vite |
preprocesadores | Cero dependencias de Sass/Less/Stylus junto con Tailwind v4 |
referencia | Los <style> con @apply/@variant declaran @reference |
utilidades-removidas | Cero apariciones de utilidades v3 removidas (no renombradas — esas siguen siendo válidas en v4 con otra escala) |
modificador-important | El modificador ! va al final de la clase, no antepuesto |
utilidades-en-conflicto | Cero utilidades que fijan la misma propiedad CSS sobre el mismo elemento |
mobile-first | La utilidad sin prefijo es para mobile, no el breakpoint chico |
theme-variables | Los theme tokens se declaran con @theme, top-level |
namespace-color | Los colores custom van bajo el namespace --color-* |
clases-dinamicas | Cero nombres de clase construidos por concatenación en tiempo de ejecución |
Límite declarado, sin excepciones
No hay parser real de HTML, JSX ni CSS: son expresiones regulares sobre el texto, igual que
html_checks antes de tener un árbol. El mapa utilidad→propiedad CSS que usan
utilidades-en-conflicto y mobile-first es deliberadamente chico —cubre solo las familias que las
propias páginas fuente usan de ejemplo (display, position, text-align...)—.
Reporte
| Regla | Estado | Archivo:línea | Detalle |
|---|
| (una fila por cada regla corrida) | [PASSED]/[FAILED]/[NO VERIFICABLE] | ... | ... |
Recursos incluidos
scripts/tailwind_checks.py — instrumento sin dependencias externas, extraído y verificado
(sabotaje de cada regla, atajos prohibidos reconstruidos a mano) en
kdd-book.scripts/knowledge.json — las 21 técnicas de la selección curada, triadas en pila A/B/C con su
why_not cuando corresponde.
