Example on using with ESLint

[rdgr]

I checked the docs that provide the info to allow TWC to work nicely with the Tailwind CSS IntelliSense VS Code extension. However, has anyone tried to make it work with ESLint (eslint-plugin-tailwindcss)? Gave it a couple of tries but with no success so far. I even merged the regexes into just one in order to add the override to classRegex on the ESLINT config, but it didn't work.

For example, this line is not being sorted by eslint-plugin-tailwindcss:

const TestDiv = twc.div`py-3 sm:mt-2 px-4 mt-1 bg-neutral-30 leading-6 rounded-lg`;

Does anyone have a working example?

[rdgr]

Found one solution that works, not using eslint-plugin-tailwindcss but Prettier in the middle, with prettier-plugin-tailwindcss and eslint-config-prettier. After installing it, only needed change is adding this to your .prettierrc (or prettier.config.js):

{
  ...
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindFunctions": ["twc"]
}

and update your eslint config file:

{
  "extends": [
    ...otherConfigs,
    "prettier"
  ]
}