🐛 BUG: prettier-plugin-tailwindcss doesn't work in .astro files

[inwardmovement]

Describe the Bug

prettier-plugin-tailwindcss doesn't work in .astro files.

Steps to Reproduce

1. In an Astro project, run npm i -D prettier prettier-plugin-astro prettier-plugin-tailwindcss.
2. Add Tailwind classes and save: classes are not reordered according to the recommended class order.

[christian-hackyourshack]

I am not sure, but it might be, that we are running into the same problem as the svelte plugin. This is a known issue with the tailwind plugin (or actually with the prettier architecture): tailwindlabs/prettier-plugin-tailwindcss#31

[Princesseuh]

Hey, I made a PR to their plugin to get this working: tailwindlabs/prettier-plugin-tailwindcss#87

Hope we can get it merged!

EDIT: PR got merged and it should be available in the coming days

[Princesseuh]

Update on this, the main branch of the Tailwind plugin support Astro nicely, however the Tailwind team would like to find a more consistent way to support different frameworks before releasing. As such, the release of it will be delayed

More information here tailwindlabs/prettier-plugin-tailwindcss#87 (comment)

[fandy]

This is sweet @Princesseuh! Can you post an update when the release is deployed?

[Princesseuh]

This is sweet @Princesseuh! Can you post an update when the release is deployed?

Yep, no worries! I'll post a message here and close this issue when they'll release it. You can also follow their PR here: tailwindlabs/prettier-plugin-tailwindcss#90

[Princesseuh]

Hi everyone, we are still waiting on the Tailwind team. Adam recently posted an answer saying they would take a look in early November

Hope we can get this working soon 🤞

[Temez1]

There's a beta version that can be used for now :) See the comment

[Princesseuh]

Tailwind has officially released a version of their plugin with Astro support. Make sure to follow this section on compatibility and everything should work!

Please note that there's currently an issue in our VS Code extension that prevents plugins from being loaded correctly, it'll be fixed by withastro/language-tools#454 shortly.

Thank you everyone!

[limisc]

It doesn't work with
"prettier": "3.0.0",
"prettier-plugin-astro": "^0.11.0",
"prettier-plugin-tailwindcss": "^0.4.1",

[Princesseuh]

It doesn't work with
"prettier": "3.0.0",
"prettier-plugin-astro": "^0.11.0",
"prettier-plugin-tailwindcss": "^0.4.1",

tailwindlabs/prettier-plugin-tailwindcss#186 (comment)