prettier-plugin-tailwindcss doesn't work with vscode

[kuerme]

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"
  }
  }
  ]
}


[kuerme]

@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.

[Nzent]

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

[jerriclynsjohn]

Same issue, Format Code (Forced) works but default formatting doesn't work for prettier-plugin-tailwindcss.

Adding this "prettier.documentSelectors": ["**/*.svelte"] to .vscode/settings.json doesn't work either.

This is my project config:
prettier-plugin-tailwindcss: v0.2.2
svelte-kit: 1.0.0
tailwindcss: v3.2.4
Node.js: v18.12.1
Package Manager: pnpm v7.26.2
Operating System: Windows 11

.vscode/settings.json

// For ESLint
    "eslint.validate": ["svelte", "javascript", "javascriptreact", "html", "json", "jsonc"],
    "editor.codeActionsOnSave": {
        "source.fixAll": false
    },
    "eslint.packageManager": "pnpm",
// For Prettier
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.requireConfig": true,
// Svelte for VS Code
    "[svelte]": {
        "editor.defaultFormatter": "svelte.svelte-vscode"
    },

[rolanday]

+1. vs code, sveltekit. not working :'-(

[dospolov]

Same for me
prettier-plugin-tailwindcss: 0.2.2
prettier: 2.8.3
nodejs: 18.9.1
npm: 8.19.1
vite: 4.0.4
react: 18.2.0
VScode: 1.74.3
OS: Windows 11

[rolanday]

interestingly, I installed on T3 this evening (figured it gotta work there!!) and, surprisingly, it did NOT work. In disbelief because such a popular setup, I uninstalled and then reinstalled the VS code prettier plug in, and then it worked for me. Seems like a long shot, but anybody running into the same might want to at least try. Good luck!

[mamlzy]

I solved this problem after creating .prettierrc file and adding this:
{ "plugins": ["prettier-plugin-tailwindcss"], "pluginSearchDirs": false }

[rolanday]

Going back to my SvelteKit config (after setting it work for NextT3), I discovered that having both .prettierrc and prettier.config file caused the plug-in not to load, given if .prettierrc file contents are an empty json object like so:

{
}

Pretty surprising. I went back and forth at least 6 times, assuming I forgot to save a file or something, but consistently reproduced on my machine that having both files keeps prettier for tailwinds from working (even though prettier otherwise working).

[jerriclynsjohn]

What's going on with the prettier plugin @reinink @adamwathan? The solutions mentioned above don't work.

[hjaber]

I was able to get sveltekit with tailwind & their plugins working following this answer using pnpm.

Currently, the readme on tailwind-prettier-plugin recommends changing pluginSearchDirs and specifying the order of the plugins. I didn't do either of those and both tailwind-prettier-plugin & svelte-prettier-plugin are working.

My current .prettierrc

{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 100,
	"pluginSearchDirs": ["."],
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

[joejcox]

The plugin works for me in Nextjs 13 but only when I run my format script. It doesn't actually format on save - the format on save functionality actually stops working entirely after declaring this plugin in my config. When I remove it, format on save is working again

[luizov]

Same issue here with NextJS 13.2.3. Updated with the just released 0.2.4 version of the plugin and still the same. Manually doing a format with Format Document works but not on saving the file.

[reinink]

Hey folks! If you're having issues with the Prettier plugin, be sure to read the "Compatibility with other Prettier plugins" section of the readme: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

If you're using our Prettier plugin with another Prettier plugin that's incompatible with ours, it won't work out of the box and you'll need to follow the instructions there 👍

[luizov]

Hey @reinink, thanks for the reply. I am not using other prettier plugins. It's a barebones Nextjs 13 project with tailwind and prettier installed. Here is the prettier.config.js file:

module.exports = {
  singleQuote: true,
  semi: true,
  plugins: [require('prettier-plugin-tailwindcss')],
  pluginSearchDirs: ["."],
  tailwindConfig: './tailwind.config.js',
}

I've just discovered that when the file extension is .js the problem occurs and if it is .jsx the plugin works. I don't know if this is mentioned in the docs as a normal behavior but couldn't find anything.

In fact, here is a repo that reproduces the issue:
https://github.com/luizov/prettier-issue

[philipdanielhayton]

I have just got this working. My setup uses:

• SvelteKit
• pnpm
• VS Code

Firstly, a note on debugging. The Output tab in VS code spits out a load of info whenever prettier runs. This useful because it (A) shows when prettier runs, and (B) shows what config is being used. In my case, I was confused why tailwind classes weren't being sorted even though my document seemed to be formatted, turns out it was a different formatter doing the formatting. I did a bit of digging and found these two issues that set me right (1) (2)

TLDR;

1 - Rename .prettierrc to .prettierrc.cjs, then open .prettierrc.cjs and...
2 - Wrap the imports in a require and make sure tailwind is the last import.
3 - Set pluginSearchDirs to false

.prettierrc.cjs
module.exports = {
        ....
	plugins: [require('prettier-plugin-svelte'), require('prettier-plugin-tailwindcss')],
	pluginSearchDirs: false,
	overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
        ....
};

It should now work. Check the Output tab to double check that it's picking up the right config.

If Prettier still doesn't format the file, you may have to manually add a file association. Open settings in VS code, search for prettier document selectors, and add a new item: **/*.svelte

You can also see whether Prettier is recognizing your file in the bottom right hand corner of VS code, a double tick next to Prettier means you're all good.

Good luck!

[lab-do]

This fixed the issue for me.
.prettierrc

{
  "pluginSearchDirs": ["."],
  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
}

.vscode/settings.json

{
  "prettier.requireConfig": true,
  "prettier.documentSelectors": ["**/*.svelte"],
  "[svelte]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  }
}

[shinebayar-g]

@thecrypticace Thanks for clearing up how we should use prettier.documentSelectors & editor.defaultFormatter that helped a lot.

[rory-orennia]

I didn't have any luck getting this working in VSCode with the Prettier extension, even after following all the steps and changing my prettierrc to a prettier.config.js and using require and all that. I reverted to just having a prettierrc without the require and it's working fine with my husky -> lint-stage -> prettier --write precommit hook so I guess that's good enough for me. Hopefully something changes in the future that gets the extension working for me

Scratch all that. If you're using Svelte and pNPM, make sure the file is called .prettierrc.cjs or .prettier-config.cjs and not .prettierrc or prettier.config.js. everything starts working with the .cjs extension

[harryqt]

@rory-orennia Thank yo so much, it worked. I was trying to make it work for weeks. It also works with Svelte now.

[kikky7]

I am using prettier-plugin-tailwindcss v0.3.0 with Next.js and tsx files and it wasn't working for me when using yarn to install node_modules and add packages. Once I switched back to npm, it started to work...

I don't use any extra config files for this like .prettierrc (and similar) mentioned here.

[harryqt]

@kikky7 npm suck, use pnpm.

[Himayun-Khan]

i am working on nextjs typescript tailwindcss project and i want to use preetier plugin tailwindcss to make my code more pretty can anyone help me out to find the solution, i am using npm

[michaelhall923]

I fixed it by rolling back the vscode prettier plugin version to v9.2.0. Hope this helps.

[Igloczek]

If someone ends here, but is using Astro, not Svelte:

.prettierrc.cjs or prettier.config.cjs

module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
  overrides: [{ files: "*.astro", options: { parser: "astro" } }],
  // rest of your custom stuff
}

[afi-dev]

Like the users of this issue, I have a solution that works for AdonisJS users who use the Edge template, not Svelte

tested & work with : .prettierrc.cjs or prettier.config.cjs or prettier.config.js
tested & work with : Prettier v3

my own prettier.config.js :

module.exports = {
  useTabs: false,
  tailwindConfig: "./tailwind.config.js", // ⚠️ Set it so you're sure to call up the Tailwind config in the right place.
  trailingComma: 'es5',
  semi: false,
  singleQuote: true,
  quoteProps: 'consistent',
  bracketSpacing: true,
  arrowParens: 'always',
  printWidth: 100,
  plugins: [
    'prettier-plugin-organize-imports',
    'prettier-plugin-organize-attributes',
    'prettier-plugin-packagejson',
    'prettier-plugin-tailwindcss',  // ⚠️ Order is very important place Tailwind prettier plugin at the end
  ],
  overrides: [ // ⚠️ If you are using edge you need also set this to add support for edge
    {
      files: '*.edge',
      options: {
        parser: 'html',
      },
    },
  ],
};

Don't forget to download VSCode Prettier Extension and add this settings inside your VSCode settings.json :

{
        ...
        "editor.formatOnSave": true,
  	"[edge]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"prettier.useEditorConfig": false,
	"prettier.documentSelectors": ["**/*.edge"],
}

here you'll find a Medium that explains how to add support for an extension that doesn't exist in Prettier. (Astra, Edge, Handlebars ...)

[pratyushtewari]

I solved this problem after creating .prettierrc file and adding this: { "plugins": ["prettier-plugin-tailwindcss"], "pluginSearchDirs": false }

THANK YOU!

This worked.

Adding the prettier.config.js does not work as suggested in the Tailwind plugin readme.

[thecrypticace]

@pratyushtewari can you provide a reproduction for this?

[stoddabr]

If someone ends here, but is using Astro, not Svelte:

.prettierrc.cjs or prettier.config.cjs

module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
  overrides: [{ files: "*.astro", options: { parser: "astro" } }],
  // rest of your custom stuff
}

Not sure if my setup is different or this it out of date but I also had to install and update prettier-plugin-astro (the astro vscode extension ships with and uses prettier by default making the config finicky, it only supports prettier v3 around version 11 of the astro plugin). I had another package which install an older version of the astro plugin by default and so I had to run:

npm install -D prettier-plugin-astro prettier-plugin-tailwindcss

to get the updated, v3 compatible, plugins and then updated my .prettierrc with the list to be:

{
  "tabWidth": 2,
  "useTabs": false,
  "bracketSameLine": true,
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss"
  ]
}

[pratyushtewari]

@pratyushtewari can you provide a reproduction for this?

Hi @thecrypticace - my project is here: https://github.com/pratyushtewari/bbos-components , the prettier.config.js did not work for me but adding .prettierrc worked with the same content inside the config.

I think prettier is only looking for the .prettierrc file.

[thecrypticace]

@pratyushtewari Your project is "type": "module" by default which means your prettier config itself must also be ESM.

The following for prettier.config.js works in that case:

export default {
  "plugins": ["prettier-plugin-tailwindcss"],
}

[pratyushtewari]

@thecrypticace - Thanks! this worked.

I am not fluent in ESM much. to me export default and module.exports seems to be the same. I will look for more info on that.

Thanks!

[Sahasrara]

This still isn't working for me.

[Blackwidow-sudo]

This still isn't working for me.

Yeah i have given up and use Headwind (VSCode extension) instead for class sorting

[abdulsamadayoade]

I solved this problem after creating .prettierrc file and adding this: { "plugins": ["prettier-plugin-tailwindcss"], "pluginSearchDirs": false }

this works

[sahilatahar]

I solve this problem by adding *.{jsx,html} into Prettier: Document Selectors

[mengxi-ream]

Alright folks, here is the summary. I just spent a good couple of hours debugging this. This might save you some time. Thank you everyone who have commented so far. Specially ones that who mentioned renaming files to common js syntax, switching pnpm to npm etc.

1. Using .prettierrc - npm

{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 100,
	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
	"pluginSearchDirs": false,
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

Works. I could keep Svelte for VS Code as my default formatter. Both Prettier & Svelte formatter did the same. I am not sure if there is any difference at all here. If anyone knows please let me know.

2. Using .prettierrc - pnpm

Surprisingly pnpm didn't work. I no longer see the Prettier as a formatter. Svelte for VS Code does format, but tailwind plugin doesn't work (If you look at the prettier logs, it doesn't do anything). As others said Format Document (Forced) actually works.

3. Using .prettierrc.cjs - npm

module.exports = {
  useTabs: false,
  singleQuote: true,
  trailingComma: 'none',
  printWidth: 100,
  plugins: [require('prettier-plugin-svelte'), require('prettier-plugin-tailwindcss')],
  pluginSearchDirs: false,
  overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
};

Works, same as above.

4. Using .prettierrc.cjs - pnpm
   I don't see Prettier as a formatter. It was disabled in the corner like previously. But default formatter Svelte for VS Code picked up a tailwind plugin this time and actually worked.

Looks like something is wrong with pnpm x prettier setup. Also no need to mess with "prettier.documentSelectors": ["**/*.svelte"] .

TLDR; if you're using pnpm make sure you're using .prettierrc.cjs

Yup found it prettier/prettier#9167 or pnpm/pnpm#4700

For folks using pnpm:

After adding prettier-plugin-tailwindcss to the last line of plugins (See doc) I can format the tailwind className string by command prettier --write . but VS Code doesn't format the file on save.

Then I change the config file name to .prettierrc.cjs, it works.

So my final config file is like:

module.exports = {
  plugins: [
    "prettier-plugin-packagejson",
    "@trivago/prettier-plugin-sort-imports",
    "prettier-plugin-prisma",
    "prettier-plugin-tailwindcss",
  ],
  pluginSearchDirs: false,
  importOrder: [
    "server-only",
    "^@([^/]+)(.*)/?(.*)$",
    "^@/(.*)/?(.*)$",
    "^[./]",
  ],
  // importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  importOrderGroupNamespaceSpecifiers: true,
};

[elie222]

To others facing issues, restarting VS Code can help. Especially if you've changed a config and seen no impact.

[mrruby]

.vscode/settings.json

{
  "prettier.requireConfig": true,
  "prettier.documentSelectors": ["**/*.svelte"],
  "[svelte]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  }
}

adding this to .vscode/settings.json finally helped me <3

[jacksteamdev]

Using require.resolve() instead of require() in .prettierrc.cjs solved an ESM import error for me.

module.exports = {
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "plugins": [require.resolve("prettier-plugin-svelte"), require.resolve("prettier-plugin-tailwindcss")],
  "overrides": [
    {
      "files": "*.svelte",
      "options": {
        "parser": "svelte"
      }
    }
  ],
  "tabWidth": 2
}