Can I use Visual Studio Code for tailwinds styles autocompletion outside of tags?

I need to be able to put the tailwind styles in a variable outside of the tags because I have a lot of repeating styles and it messes up the html a lot. I created an object to assign the styles that I need to the properties, but when I write the styles in the object, Visual Studio Code auto-completion doesn’t work.

const styles = {
  header: 'flex w-1440 m-2',
  nav: 'flex',
  imageLogo: 'relative pl-20',
  ul: 'flex space-x-4 ml-20',
  li: 'font-jost font-normal font-400 text-32 leading-46 flex items-center uppercase text-neutral-darker mix-blend-normal',
}

return (
    <header className={styles.header}>
      <nav className={styles.nav}>
        <Image
          src="/images/LogoPrimary.svg"
          alt="THE HANDS MASSAGE"
          width={414}
          height={46}
          className={styles.imageLogo}
        />
        <ul className={styles.ul}>
          <li className={styles.li}>{translations.navLinks.home}</li>
          <li className={styles.li}>{translations.navLinks.services}</li>
          <li className={styles.li}>{translations.navLinks.contact}</li>
          <li className={styles.li}>{translations.navLinks.aboutUs}</li>
        </ul>
      </nav>
 
    </header>
  )
}

This doesn’t work even with Tailwind Css IntelliSense extension installed.