Styling an existing component doesn't seem to work in twin.macro/react-twc

[Pavan Kumar Sunkara]

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

For example: v0.5.3

What version of Tailwind CSS are you using?

For example: v3.4.1

What version of Node.js are you using?

For example: v18.0.0

What package manager are you using?

For example: pnpm

What operating system are you using?

For example: Linux

Reproduction URL

.prettierrc.js

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  tailwindFunctions: ['tw']
};

Example.tsx

const Btn1 = tw(Button)`border p-1 bg-pink-100`;

const Btn2 = tw(Button).attrs({
  size: 'small',
})`border p-1 bg-pink-100`;

const Btn3 = tw(Button)<React.ComponentProps<typeof Button>>`border p-1 bg-pink-100`;

Describe your issue

Both twin.macro and react-twc allows styling an existing component using the above syntax.

Prettier plugin is not sorting the classes in those syntax usages.

[Pavan Kumar Sunkara]

Also, the following doesn't seem to work too:

const Box1 = tw.div.attrs({
  onClick: () => console.log('clicked'),
})`border p-1 border-red-600 bg-slate-100`;

const Anchor = tw.a.attrs<AnchorProps>((props) => {})`p-1 border-2 border-blue-500 bg-white`;