prettier-plugin-tailwindcss doesn't work with vscode

[lnlion]

prettier-plugin-tailwindcs: v0.2.1
Tailwind CSS: v3.2.4
Node.js: v18.12.1
Package Manager: pnpm v7.21.0
Operating System: Windows 11

Describe your issue
prettier-plugin-tailwindcss doesn't work with vscode and it's plugin Svelte for VS Code and Prettier - Code formatter;
it won't format the *.svelte files (but it formats the html files);

And with the svelte files, the "prettier" has taken effect, cause the prettier-plugin-organize-imports and prettier-plugin-css-order works fine，except prettier-plugin-tailwindcss...，so i think Is there anything that prevents tailwind formatting?...

here is my .prettierrc

{
    "plugins": ["prettier-plugin-svelte", "prettier-plugin-organize-imports", "prettier-plugin-css-order", "prettier-plugin-tailwindcss"],
    "pluginSearchDirs": false,
    "svelteSortOrder": "options-scripts-markup-styles",
    "svelteStrictMode": false,
    "svelteAllowShorthand": false,
    "svelteIndentScriptAndStyle": true,
    "organizeImportsSkipDestructiveCodeActions": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 4,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "bracketSameLine": true,
    "endOfLine": "lf",
    "quoteProps": "as-needed",
    "arrowParens": "always",
    "printWidth": 999999,
    "htmlWhitespaceSensitivity": "ignore",
    "singleAttributePerLine": false
}

[justingolden21]

I was JUST about to say this and you beat me to it by 12min LMAO. +1 on this issue.

[floormodelcitizen]

Make that a +2

prettier-plugin-tailwindcs: v0.2.1
Tailwind CSS: v3.2.4
Node.js: v16.16.0
Package Manager: pnpm v7.13.5
Operating System: Big Sur v11.7.2

My.prettierrc:

{
  "useTabs": false,
  "tailwindConfig": "./tailwind.config.cjs",
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "printWidth": 120,
  "plugins": [
   "prettier-plugin-svelte",
   "prettier-plugin-tailwindcss"
  ],
  "pluginSearchDirs": [
  "."
  ],
  "overrides": [
  {
  "files": "*.svelte",
  "options": {
   "parser": "svelte"
  }
  }
  ]
}


[lnlion]

@floormodelcitizen
Based on your prettier configuration, if you add "prettier.documentSelectors": ["**/*.svelte"] to the vscode settings.json, prettier-plugin-tailwindcss works, and the svelte will be formatted correctly; But the plugin prettier-plugin-organize-imports will fail;

This one is right, that one is wrong 😂

[thecrypticace]

@floormodelcitizen

Couple of things:

1. Your prettier version is outdated (I went snooping around your desktop clock project :D). You need at least prettier 2.6. After updating it formatting in svelte files seems to work okay.
2. I noticed an issue where some used component imports get removed. This appears to be a problem with organize imports. The issue is present regardless of whether or not the tailwindcss plugin is enabled. Removing the organize imports plugin seems to fix the disappearing import.

So, as far as I can tell, your project seems to be working on my system at least. I'm testing on macOS Monterey but that shouldn't make a difference here.

@kuerme Could you provide a reproduction repo I can take a look at? I've got a windows machine as well I can test with.

[ditoglez]

Hi @thecrypticace,

You can find a demo repo here.

[ditoglez]

Also, if there is some code wrapped in an expression block, even after running prettier from command line won't sort the classnames:
An example would be:

{#await init()}
	<div class="h-screen flex-col place-content-center bg-gray-100 flex items-center">
		<HeartIcon class="h-14 w-14 animate-ping fill-red-600" />
	</div>
{:then}
	<main class="main bg-gray-100">
		<slot />
	</main>
{/await}

[thecrypticace]

@ditoglez That looks like a separate bug to me. Would you please open a new issue?

[ditoglez]

@thecrypticace please find the issue here: #117

[thecrypticace]

@ditoglez I'm looking at your reproduction repo and it is indeed having problems formatting. But it's not using prettier at all in that project:

I can get it to format the code if I run Format Code (Forced). So as far as prettier itself is concerned it seems to work fine. Perhaps this is a problem with the Prettier VS Code extension? I'm not entirely sure what the cause is here. There's no output to indicate what the problem might potentially be either. I expect it is likely some incompatibility with pnpm and the vscode extension but not certain.

[ditoglez]

@thecrypticace sorry for the late reply. I also saw that the code can be formatted through Format Code (Forced) as a workaround, which I am using at the moment. I tried switching between npm yarn and pnpm and the result is the same. Might be actually an issue with VSCode itself, I will try to take another look in my spare time.

[sunneydev]

I am facing the same problem when I have multiple plugins in my prettier config. Additionally, I am using a plugin for sorting imports in prettier, but it only enables the last plugin to work.

[sunneydev]

Might be related: prettier/prettier#12807

[EddieJeong]

@ditoglez I'm looking at your reproduction repo and it is indeed having problems formatting. But it's not using prettier at all in that project:

I can get it to format the code if I run Format Code (Forced). So as far as prettier itself is concerned it seems to work fine. Perhaps this is a problem with the Prettier VS Code extension? I'm not entirely sure what the cause is here. There's no output to indicate what the problem might potentially be either. I expect it is likely some incompatibility with pnpm and the vscode extension but not certain.

same here. It doesn't work with my vscode and 'pnpm' but npm works.

[oSethoum]

Am facing the same issue with Nextsjs project on windows.

[nisalk96]

Same issue with
Next.js 13.1.6
NodeJS 18.12.1
pnpm 7.26.2
VSCode
Windows