vscode textmaterule to target react className string

Question

Found this awesome post on how to dim semicolons in vscode.

Thinking it could be useful for javascriptreact and typescriptreact files to do the same for the className string when working with class utilities like tailwind.

Anybody knows a way to tackle this?

---

It would be icing on the top bonus if the rule could be ignored when j/tsx element it focused.

Answer 1

Continued to search SO after posting this (as suggested by @rioV8) and found this SO answer to lead me near the goal.

Installed the highlight extension and wrote this:

  "highlight.regexes": {
    "(.*\\sclassName=\")(.*?)\"": [
      {},
      {
        "color": "grey"
      }
    ]
  }