Is it possible to use prettier-plugin-tailwindcss with tailwind-rn?

[darrylyoung]

Hi, everyone!

This is my first time using tailwind-rn, and I wondered if it's possible to use something like prettier-plugin-tailwindcss to automatically sort and clean up classes? I tried it with a React Native project and it didn't work, but I was wondering if there were any config settings you'd recommend, or if there were alternatives.

For context, I ask because I've been helping out with a project that uses tailwind-rn and I'd love to have a quick way to clean up things like this. By clean up, I mean sort out the spacing, organise the classes, etc.

style={tailwind(
    'rounded-8  border-gray-400 border-dashed  items-center border-1 px-40  ',
)}

[visormatt]

@darrylyoung I opened a PR on the prettier-plugin-tailwind side of things for exactly this. No plans on supporting the "style" property or react native officially as of now 🤷 You can however patch that package to also look in style attributes for prettier to update. In the packages build file you'd search for "class","className" and update it to "class","className","style" and then patch it npx patch-package prettier-plugin-tailwindcss

[darrylyoung]

@visormatt Thanks, Matt! Much appreciated. I'll keep an eye on things over on the Tailwind side, but your solution looks good for now.