prettier-plugin-tailwindcss: prettier-plugin-tailwindcss doesn't work with vscode

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

Hey everyone! 👋

It seems like there are a lot of different situations being presented in this issue, and I’m not entirely sure they all stem from the same underlying problem.

From what I can gather, most of the issues reported here seem to be related to pnpm. It’s worth noting that there are known issues with Prettier itself when it comes to handling pnpm like https://github.com/prettier/prettier/pull/9167 and https://github.com/pnpm/pnpm/issues/4700.

I’ve got a few notes that should hopefully help anyone running into problems with pnpm:

• We recommend you use a prettier.config.cjs or .prettierrc.cjs file instead of .prettierrc which will allow you to use require to load the plugin explicitly:

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

• When using a JS prettier config be sure to set pluginSearchDirs: false and not pluginSearchDirs: ["."]. The internal plugin compatability we’ve implemented is order-dependent and doesn’t necessarily work when the Tailwind CSS prettier plugin is not loaded last. This is a limitation of Prettier itself not directly supporting multiple plugins for the same language. Not setting this right could result, for instance, in Svelte files being formatted but classes not being sorted.

Before:

module.exports = {
  pluginSearchDirs: ["."], // <-- Don't do this
  overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
  
  // Other prettier options here
};

After:

module.exports = {
  pluginSearchDirs: false, // <-- Do this instead
  plugins: [require('prettier-plugin-svelte'), require('prettier-plugin-tailwindcss')],
  overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
  
  // Other prettier options here
};

• Set "prettier.documentSelectors": ["**/*.svelte"] in your VSCode settings. It’s not always required but some situations do need it to work properly. It’s also recommended you add this anytime you also have overrides in your Prettier config.

{
  "prettier.documentSelectors": ["**/*.svelte"],
}

• For Svelte specifically be sure that the formatter is set to svelte.svelte-vscode in your VSCode settings:

{
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
}

• When using languages like svelte, pug, twig, or when using other prettier plugins like prettier-plugin-organize-attributes or prettier-plugin-organize-imports be sure to follow the instructions in our plugin compatibility guide. Just make sure to use require calls for the plugins you’re using instead of specifying the plugin name as a string.

Thanks everyone for the solutions you provivded (and h/t to @shinebayar-g for the research regarding npm vs pnpm)!

At this point, I’m going to close this issue because I’m not convinced that it’s directly related to this plugin but an issue with Prettier, pnpm, and plugins in general — tho I do believe this is still a good issue to keep around for people who are searching for solutions to similar problems.

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

None of the solutions above worked in my project but I found a solution so I share it, maybe will help others too.

Situation: We had installed in our project both prettier-plugin-tailwindcss and @trivago/prettier-plugin-sort-imports for sorting import statements, however, only the latter was working. In .prettierrc we had only one of them listed: "plugins": ["prettier-plugin-tailwindcss"].

Solution: Adding the …-sort-imports plugin before (the order mattered!) prettier-plugin-tailwindcss fixed the issue. So our current, working .prettierrc file looks like that:

{
  "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
  "singleQuote": true,
  "importOrder": ["<THIRD_PARTY_MODULES>", "^@(.+)/(.+)$", "^\\..+"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

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

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 👍

@kikky7 npm suck, use pnpm.

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

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.

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

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

1. 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 https://github.com/prettier/prettier/pull/9167 or https://github.com/pnpm/pnpm/issues/4700

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!

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

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 …)

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

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

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

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

this works

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

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

Am facing the same issue with Nextsjs project on windows.

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.

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

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

1. 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,
};

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
}

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

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.

Might be related: https://github.com/prettier/prettier/issues/12807