Closed kuerme closed 1 year ago
I was JUST about to say this and you beat me to it by 12min LMAO. +1 on this issue.
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"
}
}
]
}
@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 😂
@floormodelcitizen
Couple of things:
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.
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}
@ditoglez That looks like a separate bug to me. Would you please open a new issue?
@thecrypticace please find the issue here: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/117
@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.
@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.
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.
Might be related: https://github.com/prettier/prettier/issues/12807
@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.
Am facing the same issue with Nextsjs project on windows.
Same issue with Next.js 13.1.6 NodeJS 18.12.1 pnpm 7.26.2 VSCode Windows
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"
},
+1. vs code, sveltekit. not working :'-(
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
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!
I solved this problem after creating .prettierrc
file and adding this:
{ "plugins": ["prettier-plugin-tailwindcss"], "pluginSearchDirs": false }
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).
What's going on with the prettier plugin @reinink @adamwathan? The solutions mentioned above don't work.
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" } }]
}
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
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.
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 👍
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
I have just got this working. My setup uses:
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!
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",
}
}
The issue for me was that I didn't have the prettier-plugin-svelte
plugin, installing and adding it to my config fixed the issue 🙂
Hi @kuerme, I'm not sure if it helps, but the fix suggested by @lab-do works just fine (except that you don't even need to specify the plugins in the array, you can remove it entirely), with the mention that a window reload is needed. The issue that I'm facing is that prettier-plugin-organize-imports
doesn't work. In your original comment, you say that it's working fine, but I'm wondering how can that be since the plugin doesn't actually have support for it (issue here)? Am I missing something?
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
}
Ok very weird, i got it to work now thanks to @philipdanielhayton. My setup was sveltekit+tailwind using just the svelte & tailwind plugins for prettier.
What i changed was:
.prettierrc.cjs
out of .prettierrc
like:
module.exports = {
arrowParens: 'avoid',
bracketSameLine: true,
svelteIndentScriptAndStyle: true,
singleAttributePerLine: true,
tabWidth: 2,
svelteSortOrder: 'scripts-options-markup-styles',
semi: false,
useTabs: true,
singleQuote: true,
trailingComma: 'none',
printWidth: 100,
plugins: [require('prettier-plugin-svelte'), require('prettier-plugin-tailwindcss')],
pluginSearchDirs: false,
overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
}
.vscode/settings.json
to:
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"files.insertFinalNewline": true,
// before, i had the following as a TS exclusive
"editor.defaultFormatter": "esbenp.prettier-vscode",
}
Hope this can help someone else.
Edit: Ok thats very weird: Same project on a mac instead of windows, i did the same changes and it doesn't work. Really annoying stuff...
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.
.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.
.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.
.prettierrc.cjs
- npmmodule.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.
.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
Hey everyone! :wave:
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
:
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
};
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
};
"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"],
}
svelte.svelte-vscode
in your VSCode settings:{
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode"
},
}
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.
@thecrypticace Thanks for clearing up how we should use prettier.documentSelectors
& editor.defaultFormatter
that helped a lot.
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
@rory-orennia Thank yo so much, it worked. I was trying to make it work for weeks. It also works with Svelte now.
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.
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
I fixed it by rolling back the vscode prettier plugin version to v9.2.0. Hope this helps.
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
}
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 ...)
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.
@pratyushtewari can you provide a reproduction for this?
If someone ends here, but is using Astro, not Svelte:
.prettierrc.cjs
orprettier.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 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.
@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"],
}
@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!
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
andPrettier - 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
andprettier-plugin-css-order
works fine,exceptprettier-plugin-tailwindcss
...,so i think Is there anything that prevents tailwind formatting?...here is my
.prettierrc