`@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

[DianaSuvorova]

I think tailwindcss plugin should support this parser. Created a PR for them.

[DianaSuvorova]

I did not hear back from tailwind maintainers.. I created new eslint plugin to lint HTML files with this parser and that would support alpinejs syntax (it works with vanilla HTML as well).

Give it a try, let me know!

eslint-plugin-html-tailwind

[LatenPath]

@DianaSuvorova

Thank you so much for your efforts <3

I tried the plugin and this is my feedback:

At first, I installed the plugin and got an import error:

I'm still a newbie so it made me a little confused (==') ... But I found a way to work around it:

No more error. So I can test the plugin:

Everything works perfectly.

Once again, thank you so much. Your plugin is an awesome solution, and I can't wait to see more in the future!

[DianaSuvorova]

@LatenPath , oh nice, thanks for trying it! I will look into that bundling issue to fix the import.
Feel free to post any issues/suggestions on the plugin repo, all the feedback is very appreciated.

[DianaSuvorova]

@LatenPath I couldn't repro specific error you were getting. There is another issue I ran into with import, it should be fixed with the lates release. DianaSuvorova/eslint-plugin-html-tailwind#13
So if importing the plugin does not work for you after the upgrade, please lmk.