If `node_modules` folder does not contain prettier-plugin-astro, it does not work
tedawf opened this issue · 1 comments
What version of prettier-plugin-tailwindcss
are you using?
0.13.0
What version of Tailwind CSS are you using?
3.4.3
What version of Node.js are you using?
21.7.2
What package manager are you using?
npm
What operating system are you using?
macos
Reproduction URL
A fresh Astro project will do. Like this:
npm create astro@latest astro-tailwind
npx astro add tailwind
npm i -D prettier prettier-plugin-tailwindcss
// prettier.config.mjs
/** @type {import("prettier").Config} */
export default {
plugins: ["prettier-plugin-tailwindcss"],
};
Must use Astro's VSCode extension as the default formatter for .astro
files.
I also have Prettier's VSCode extension installed.
Describe your issue
Hi, this is to help anyone who is using Astro's VSCode extension as the default formatter for .astro
files and wants to use this prettier plugin for tailwindcss.
When I follow the README.md to install prettier-plugin-tailwindcss, it's not working as expected. After a little trial and error, I realised it's because the node_modules
folder is missing prettier-plugin-astro
.
After running
npm i -D prettier prettier-plugin-astro prettier-plugin-tailwindcss
instead of
npm i -D prettier prettier-plugin-tailwindcss
as per the installation guide, I managed to get this plugin working.
To test this, I manually deleted prettier-plugin-astro
from my node_modules folder, then I run Developer: Reload window
in vscode. This cause prettier-plugin-tailwindcss
to stop working. I then run npm i
again to get prettier-plugin-astro
back in my node_modules folder (and run Developer: Reload window
) and now it starts working again.
Hi! Our plugin relies on other plugins to know how to parse files. In this case we can't parse Astro ourselves but we know how to operate on the result that Astro produces after parsing it.
This means that you have to have prettier-plugin-astro
installed if you want to sort classes in a .astro
file, prettier-plugin-svelte
installed if you want to sort classes in a .svelte
file, etc…
We talk about plugin compatibility and how things must be loaded here: https://github.com/tailwindlabs/prettier-plugin-tailwindcss?tab=readme-ov-file#compatibility-with-other-prettier-plugins
Closing as this is expected behavior.