How to use twc with prettier-plugin-tailwindcss

[gsong]

Following https://github.com/tailwindlabs/prettier-plugin-tailwindcss?tab=readme-ov-file#sorting-classes-in-template-literals seems to work for simple cases such as twc.a`...`. However for more sophisticated use cases such as twc(Component)`...` or twc(Component).attrs({...})`...`, the plugin doesn't seem to work. Any idea?

[gsong]

Kludgy workaround:

const MenuLink = (() => {
  const twcx = twc(RemixLink);
  return twcx`hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors`;
})();

And add twcx as one of tailwindFunctions in prettier config.

[gregberge]

I don't understand this workaround, not sure it's the best path to take.

[gsong]

I'm not sure if it's the best path to take either. The workaround is create a temporary function named twcx, and register twcx with the plugin as a function to watch for tailwind classes.

The name doesn't really matter, it's just something I made up.