Linting af Tailwind med ESLint

Slåfejl i Tailwind-klassenavne er stille fejl — browseren ignorerer ganske enkelt ukendte klasser uden advarsler i konsollen. Et manglende bogstav som bg-blue-50O (stort O i stedet for nul) anvender ingen baggrund, og fejlen kan gå ubemærket hen i flere dage. ESLint med et Tailwind-plugin opdager disse problemer under udviklingen, før de når produktionen.

eslint-plugin-tailwindcss er det mest udbredte ESLint-plugin til Tailwind. Det validerer klassenavne mod din Tailwind-konfiguration, advarer om modstridende hjælpeværktøjer og kan håndhæve dit teams konventioner for rækkefølgen af klasser. Installer det sammen med ESLint i projektets udviklingsafhængigheder.

I det traditionelle format med .eslintrc skal du tilføje tailwindcss til plugin-arrayet og udvide den anbefalede konfiguration. Det anbefalede sæt aktiverer de tre centrale regler: classnames-order, no-custom-classname og no-contradicting-classname.

Til ESLint 9's nye flade konfigurationsformat skal du importere pluginet og sprede den anbefalede konfiguration ind i dit konfigurationsarray. Peg indstillingen tailwindConfig på din konfigurationsfil, så pluginet kan læse dine brugerdefinerede temaværdier og plugins, når det validerer klassenavne.

Reglen no-contradicting-classname opdager modstridende hjælpeværktøjer, der anvendes på det samme element — for eksempel hvis du bruger både block og inline på den samme div eller både w-full og w-auto uden et responsivt præfiks. Disse konflikter giver uforudsigelige resultater, som er svære at fejlfinde uden linting-understøttelse.

Reglen no-custom-classname advarer, når du skriver en klasse, der ikke er en del af Tailwind-outputtet — hverken et indbygget hjælpeværktøj eller en brugerdefineret klasse, der er defineret i din konfiguration eller dine plugins. Det hjælper med at opdage slåfejl og forhindrer udviklere i at skrive almindelige CSS-klassenavne i et Tailwind-projekt uden at følge de rigtige procedurer.

Reglen classnames-order håndhæver den samme kanoniske rækkefølge af klasser, som Prettier-pluginet producerer. Når du bruger begge værktøjer, skal du konfigurere det ene som den autoritative kilde til rækkefølgen. De fleste teams bruger Prettier til automatisk formatering og deaktiverer ESLints sorteringsregel for at undgå konflikter mellem de to værktøjer.

Hvis dit projekt bruger brugerdefinerede CSS-klassenavne sammen med Tailwind-hjælpeværktøjer — for eksempel klasser fra et animationbibliotek fra en tredjepart eller ældre CSS — skal du tilføje dem til indstillingen whitelist. Det fjerner falske positiver, samtidig med at ægte slåfejl i Tailwind-klassenavne stadig opdages.

Tilføj et lint-script til din package.json, der målretter alle skabelonfiler. Kør det lokalt og i CI for at finde fejl i klassenavne, før de merges. Flaget --fix retter problemer med rækkefølgen automatisk, men kan ikke rette slåfejl — de kræver manuel gennemgang.

Installer ESLint-udvidelsen til VS Code for at se understregede fejl direkte i editoren, mens du skriver. Fejl i Tailwind-klasser vises som gule advarsler eller røde fejl direkte i koden, så en slåfejl er umulig at overse. Kombiner dette med udvidelsen Tailwind CSS IntelliSense for autofuldførelse, så lintingen lukker feedbacksløjfen helt.

Brug ESLint til validering — så slåfejl, modstridende og ukendte klassenavne opdages. Brug Prettier til formatering — så klasser sorteres i den kanoniske rækkefølge. Deaktivér ESLint-reglen classnames-order, så Prettier alene styrer sorteringen. Denne opdeling af ansvarsområder giver dig det bedste fra begge værktøjer uden konflikter.

I denne lektion har du lært at: installere eslint-plugin-tailwindcss for at opdage slåfejl og modstridende klasser, bruge de tre centrale regler (no-contradicting-classname, no-custom-classname, classnames-order) og kombinere ESLint med Prettier, så hvert værktøj har sit eget ansvar. Næste gang definerer vi teamkonventioner og en stilguide.