Customize code folding for .js and .jsx files in vscode to achieve folding of className='...'

Question

I am looking to fold the className attribute in my react app, as I am using tailwindcss and thus the classNames get quite long, cluttering my files. I've come across code folding based on start and end identifiers using regex, but am unsure as to how I go about editing the javascript-language.configuration.json file.

I'm thinking of setting the start identifier to className=' and the end identifier to '

How do I open this file, and is it even possible to code fold within a single line?

for example, I would like to convert the following:

   <div className='some-superlong list-of-tailwind utility-classes that clutter-up this-file'>
      <p className='some-more utility-classes that-need to get-folded'>
   </div>

into something like this:

   <div className...>
      <p className...>
   </div>