What version of prettier-plugin-tailwindcss are you using?

v0.3.0

What version of Tailwind CSS are you using?

v3.3.2

What version of Node.js are you using?

v18.16.0

What package manager are you using?

pnpm

What operating system are you using?

macOS

Reproduction

prettier.config.js:

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  tailwindFunctions: ['tw', 'tw*', 'tw.div', 'div'] // none of these work
};

Example.tsx:

import tw from 'tailwind-styled-components';

// Correct syntax
tw.div`px-4 h-max`; // doesn't work
tw['div']`px-4 h-max`; // doesn't work

// Invalid syntax
tw`px-4 h-max`; // works
div`px-4 h-max`; // works

Describe your issue

This has been discussed e.g. here: 11216

At minimum, I'd like to be able to in some way be able to configure this plugin to work with styled component like syntax, e.g.:

tw.div`px-4 h-max`

However at the moment this does not work even if I tried to hardcode every element to tailwindFunctions option in prettier.config.js.

As an optimal solution I think it would be great to be able to pass regex for this option. TailwindCSS VS-Code plugin supports this feature through experimental editor option which makes it possible to configure intellisense (more here).

.vscode/settings.json:

"tailwindCSS.experimental.classRegex": [
  "tw`([^`]*)", // tw`...`
  "tw\\.[^`]+`([^`]*)`", // tw.xxx<xxx>`...`
  "tw\\(.*?\\).*?`([^`]*)" // tw(Component)<xxx>`...`
]