@html-eslint/parser doesn't support eslint-plugin-tailwindcss

[LatenPath]

I'm using html-eslint and it works fine:

But, then I want to use eslint-plugin-tailwindcss to lint tailwind elements.

It works. But, as you can see, I need to use @angular-eslint/template-parser for HTML file to make Tailwind-eslint worked.
And as I know so far, I'm not able to use both @angular-eslint/template-parser and @html-eslint/parser at the same time.

I wonder if I can do something to solve this problem? I would love some advice, thank you all very much.

[yeonjuan]

Hi @LatenPath Can you share the configuration? eslint.config.js

[LatenPath]

package.json:

"devDependencies": {
    "@angular-eslint/template-parser": "^18.3.0",
    "@html-eslint/eslint-plugin": "^0.26.0",
    "@html-eslint/parser": "^0.26.0",
    "eslint": "^9.9.0",
    "eslint-plugin-tailwindcss": "^3.17.4",
    "tailwindcss": "^3.4.10",
    "typescript": "~5.5.4",
    "typescript-eslint": "^8.2.0"
}

eslint.config.mjs:

import eslintHTML from "@html-eslint/eslint-plugin";
import eslintTypescript from "typescript-eslint";
import eslintTailwindCSS from "eslint-plugin-tailwindcss";

import eslintHTMLParser from "@html-eslint/parser";
import eslintAngularParser from "@angular-eslint/template-parser";

export default eslintTypescript.config(
//
// HTML plugin configs
{
    "files": [ "**/*.html" ],
    "languageOptions": {
      parser: eslintHTMLParser,
    },
    "plugins": {
      "@html-eslint": eslintHTML,
    },
    "rules": {
     "@html-eslint/require-doctype": 1 // For testing
    }
}
// The above code will run fine alone, below is the code used to run TailwindCSS Eslint
//  (**will cause 'TypeError: Cannot read' error, but will run fine without the above code**)
  // {
  //   "files": [ "**/*.html" ],
  //   "languageOptions": {
  //     parser: eslintAngularParser,
  //   },
  //   "plugins": {
  //     "tailwindcss": eslintTailwindCSS,
  //   },
  //   "rules": {
  //     "tailwindcss/classnames-order": [ 1 ] // For testing
  //   },
  // },
  
// I tried to combine them, but this one will cause an error too:
  // {
  //   "files": [ "**/*.html" ],
  //   "languageOptions": {
  //     parser: eslintHTMLParser,
  //   },
  //   "plugins": {
  //     "@html-eslint": eslintHTML,
  //     "tailwindcss": eslintTailwindCSS,
  //   },
  //   "rules": {
  //     "@html-eslint/require-doctype": 1,
  //     "tailwindcss/classnames-order": [ 1 ],
  //   },
  // },
//
);

TailwindCSS Eslint Github link: https://github.com/francoismassart/eslint-plugin-tailwindcss
Thank you for your support.

[yeonjuan]

@LatenPath
I've tried to reproduce it, but I don't get an error, only the config after it seems to be applied and the config before it is ignored. I'm not sure if this is the intended behavior in eslint, I'll reach out to the ESLint team about this.

It would be great if you could also share the contents of the HTML file you ran the lint on to reproduce the error.

[LatenPath]

Let me write the code for our reproduce steps.
This is a simple HTML file for testing:

<div id="dup"></div>
<div class="custom-class"></div>

Step 1: Let's test html-eslint plugin first.
eslint.config.mjs:

// HTML configs
  {
    "files": [ "**/*.html" ],
    "languageOptions": {
      parser: eslintHTMLParser,
    },
     "plugins": {
      "@html-eslint": eslintHTML,
    },
     "rules": {
     "@html-eslint/no-duplicate-id": 2
      }
   }

Ok, it worked!

Step 2: Now, comment the config above and test tailwindcss-eslint plugin alone.

// HTML configs
  {
    "files": [ "**/*.html" ],
    "languageOptions": {
      // parser: eslintHTMLParser,
      parser: eslintAngularParser, // import from "@angular-eslint/template-parser"
    },
     "plugins": {
      // "@html-eslint": eslintHTML,
      "tailwindcss": eslintTailwindCSS,
    },
     "rules": {
     // "@html-eslint/no-duplicate-id": 2
     "tailwindcss/no-custom-classname": [ 2 ],
      }
   }

Testing...
It worked!

Now, let's enable HTML-eslint again to try it out. Will it work with Angular-parser?

// HTML configs
  {
    "files": [ "**/*.html" ],
    "languageOptions": {
      // parser: eslintHTMLParser,
      parser: eslintAngularParser, // import from "@angular-eslint/template-parser"
    },
     "plugins": {
      "@html-eslint": eslintHTML,
      "tailwindcss": eslintTailwindCSS,
    },
     "rules": {
     "@html-eslint/no-duplicate-id": 2
     "tailwindcss/no-custom-classname": [ 2 ],
      }
   }

The result is... nothing changed. No Eslint output error code.

Only TailwindCSS plugin worked.

Let's try out with other rules:

"rules": {
     "@html-eslint/no-duplicate-id": 2
     "@html-eslint/element-newline": 2, // NEW
     "tailwindcss/no-custom-classname": [ 2 ],
      }

Now, we have some Eslint output error code.

Step 3: Let's change the parser to HTML-parser:

// HTML configs
  {
    "files": [ "**/*.html" ],
    "languageOptions": {
      parser: eslintHTMLParser,
      // parser: eslintAngularParser, 
    },
     "plugins": {
      "@html-eslint": eslintHTML,
      "tailwindcss": eslintTailwindCSS,
    },
     "rules": {
     "@html-eslint/no-duplicate-id": 2
     "tailwindcss/no-custom-classname": [ 2 ],
      }
   }

Unfortunately, only HTML plugin worked alone.

So, as the tittle saying, for now html parser doesn't support TailwindCSS.
TailwindCSS is a not bad tool for HTML, it's awesome if their eslint rules can be enabled together with html-eslint rules. Step 3 is the end result that I hope it would happen.

Thanks for your help. If anything is unclear, please let me know.

[yeonjuan]

eslint/eslint#18808