tailwindlabs/prettier-plugin-tailwindcss

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.