search

tailwindlabs / prettier-plugin-tailwindcss

A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
MIT License
5.56k stars 130 forks source link

If `node_modules` folder does not contain prettier-plugin-astro, it does not work #257

Closed tedawf closed 6 months ago

tedawf commented 6 months ago

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.

thecrypticace commented 6 months ago

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.