Analizar Tailwind con ESLint

Los errores tipográficos en los nombres de clases de Tailwind son errores silenciosos: el navegador simplemente ignora las clases desconocidas sin mostrar ninguna advertencia en la consola. Una letra incorrecta, como bg-blue-50O (una O mayúscula en lugar de un cero), no aplica ningún fondo y el error puede pasar desapercibido durante días. ESLint con un plugin de Tailwind detecta estos problemas durante el desarrollo, antes de que lleguen a producción.

eslint-plugin-tailwindcss es el plugin de ESLint más utilizado para Tailwind. Valida los nombres de clase comparándolos con su configuración de Tailwind, advierte sobre utilidades en conflicto y puede hacer cumplir las convenciones de ordenación de clases de su equipo. Instálelo junto con ESLint en las dependencias de desarrollo de su proyecto.

En el formato tradicional .eslintrc, añada tailwindcss al array de plugins y extienda la configuración recomendada. El conjunto recomendado activa las tres reglas principales: classnames-order, no-custom-classname y no-contradicting-classname.

Para el nuevo formato de configuración plana de ESLint 9, importe el plugin y expanda la configuración recomendada dentro de su array de configuración. Indique en el ajuste tailwindConfig la ruta a su archivo de configuración para que el plugin lea los valores personalizados del tema y los plugins al validar los nombres de clase.

La regla no-contradicting-classname detecta utilidades en conflicto aplicadas al mismo elemento; por ejemplo, usar block e inline a la vez en el mismo div, o w-full y w-auto juntas sin un prefijo responsive. Estos conflictos producen resultados impredecibles que son difíciles de depurar sin ayuda del linting.

La regla no-custom-classname advierte cuando escribe una clase que no forma parte de la salida de Tailwind, ya sea una utilidad integrada o una utilidad personalizada definida en su configuración o en sus plugins. Esto ayuda a detectar errores tipográficos y evita que los desarrolladores escriban nombres de clases de CSS convencional en un proyecto de Tailwind sin seguir los procedimientos adecuados.

La regla classnames-order impone el mismo orden canónico de clases que genera el plugin de Prettier. Cuando utiliza ambas herramientas, configure una de ellas como fuente de verdad para la ordenación. La mayoría de los equipos utiliza Prettier para el formateo automático y desactiva la regla de ordenación de ESLint para evitar conflictos entre ambas herramientas.

Si su proyecto utiliza nombres de clases CSS personalizados junto con utilidades de Tailwind, por ejemplo, clases de una biblioteca de animaciones de terceros o de CSS heredado, añádalos al ajuste whitelist. Así se silencian los falsos positivos sin dejar de detectar errores tipográficos reales en los nombres de clases de Tailwind.

Añada un script lint a su package.json que incluya todos los archivos de plantillas. Ejecútelo localmente y en CI para detectar errores en los nombres de clase antes de integrarlos. La opción --fix corrige automáticamente los problemas de ordenación, pero no puede corregir errores tipográficos; esos requieren una revisión manual.

Instale la extensión de ESLint para VS Code para ver los errores subrayados directamente en el editor mientras escribe. Los errores en las clases de Tailwind aparecen como advertencias amarillas o errores rojos en línea, por lo que es imposible pasar por alto un error tipográfico. Combine esta extensión con Tailwind CSS IntelliSense para obtener autocompletado y cerrar por completo el ciclo de retroalimentación del linting.

Utilice ESLint para la validación: detectar errores tipográficos, contradicciones y nombres de clase desconocidos. Utilice Prettier para el formateo: ordenar las clases según el orden canónico. Desactive la regla de ESLint classnames-order para que Prettier se encargue exclusivamente de la ordenación. Esta separación de responsabilidades le permite aprovechar ambas herramientas sin conflictos.

En esta lección ha aprendido a: instalar eslint-plugin-tailwindcss para detectar errores tipográficos y contradicciones, conocer las tres reglas principales (no-contradicting-classname, no-custom-classname, classnames-order) y combinar ESLint con Prettier para que cada herramienta se encargue de su responsabilidad. A continuación, definiremos las convenciones del equipo y una guía de estilo.