Plugin is incompatible with Prettier v3.0

[rahmat-dev]

What version of prettier-plugin-tailwindcss are you using?
v0.3.0

What version of Tailwind CSS are you using?
v3.3.2

What version of Node.js are you using?
v18.16.0

What package manager are you using?
npm

What operating system are you using?
macOS

Describe your issue

I've installed tailwindcss, prettier and prettier-plugin-tailwindcss in my new next js app. But the class is not sorting when I save the file.

I found this error on the vs code logs output

[lunacd]

Same issue here after upgrading to prettier 3.0

[thevuong]

It seems that you are currently utilizing prettier version 3.0.0. Please consider a temporary downgrade to version 2.8.8.

[thecrypticace]

Hey! For now we'd recommend downgrading to v2.8. Prettier v3.0 has some API changes that'll require a good bit of work and testing for our plugin. But it's on our radar! I'm going to be looking into this later this week or early next week.

[rahmat-dev]

thanks for the information @thevuong @thecrypticace

[SolomonLake]

Thanks for the update! We'll stay on 2.8.8 for now. Thanks for your work @thecrypticace.

[debashisbiswas]

While we're at it, I also noticed that prettier recently removed plugin autoloading (prettier/prettier#14759) in version 3.0.0, breaking configurations that rely on autoloading as the docs for this plugin recommend.

[thecrypticace]

@debashisbiswas The docs for this plugin explicitly recommended against autoloading and gave instructions for disabling it (when using it in conjunction with any other "compatible" plugin).

We'll update the docs to remove any mention of autoloading once we've updated for v3.0.

[PaulGriz]

Node.js Version: v18.16.0
Package Manager: npm
Operating System: macOS

---

Here to confirm that rolling back to prettier v2.8 resolved the issue. Commands used:

1. npm uninstall prettier prettier-plugin-tailwindcss
2. npm install -D prettier@2.8 prettier-plugin-tailwindcss

[ndelanhese]

Same issue here

[mutheusalmeida]

Hi, guys. I downgraded and it's still not working. My .prettierrc using Vite:

[ndelanhese]

After downgrade, it`s works fine for me

[DitwanP]

@mutheusalmeida

Hi, guys. I downgraded and it's still not working. My .prettierrc using Vite:

I don't know if this will work for you but after downgrading I had to reload my vscode for it to start working for me. I'm not using a .prettierrc file though. I'm just using the prettier extension.

[devloos]

Thanks @thecrypticace I'm looking forward to it

@mutheusalmeida downgrading worked just fine maybe try @DitwanP

[stabildev]

Spent 3 hours on this (first time installation and first time prettier config). Works after downgrade. Thought I was losing my mind

[verheyenkoen]

Spent 3 hours on this (first time installation and first time prettier config). Works after downgrade. Thought I was losing my mind

@stabildev Yeah didn't work for me either just by downgrading prettier. Had to uninstall both packages and then install them again (and I guess reloading the vscode window).

[mutheusalmeida]

Spent 3 hours on this (first time installation and first time prettier config). Works after downgrade. Thought I was losing my mind

@stabildev Yeah didn't work for me either just by downgrading prettier. Had to uninstall both packages and then install them again (and I guess reloading the vscode window).

It didn't work for me.

[SolomonLake]

For folks using vs code that are still having issues with version 2.8.8, you could try installing the specific Prettier extension version 9.13.0. I've found some backwards compatibility issues with the latest extension version. https://marketplace.visualstudio.com/items/esbenp.prettier-vscode/changelog

[gyhyfj]

same problem

[thecrypticace]

Hey all! We've just released v0.4.0 with support for both Prettier v2.x and v3.0.

Please note that many plugins have yet to be updated for Prettier v3 so the third-party plugin compatibility has been temporarily disabled when using Prettier v3. Once plugins start migrating we will test them and do another release that implements compatibility with working third-party plugins where possible.

So, for example, Svelte, Twig (Melody), Pug, Astro, etc… are not currently supported. We'll be keeping an eye on the plugins once they've updated and work toward another release which re-enables support.

Please give the new version a test and open a new issue if you see any problems. Thanks for your patience! ✨

[thecrypticace]

@vighnesh153 I'm pretty sure this is a change in Prettier itself rather than with our plugin. It may be related to the removal of plugin autoloading in Prettier v3 which means that you may need to specify the full path to the plugin.

[michaelhays]

All working for me 👍

Thanks so much for the quick turnaround!

[emonno13]

You dont need to downgrade, just add this line "plugins": ["prettier-plugin-tailwindcss"] to .prettierrc.json

[martinharyanto]

Just leaving a comment here, for me this is still not working

• "react": "^18.2.0"
• "postcss": "^8.4.21"
• "autoprefixer": "^10.4.14"
• "tailwindcss": "^3.2.7"

devDep:

• "vite": "^4.2.0"
• "prettier": "3.0" & "prettier": "2.8"
• "prettier-plugin-tailwindcss": "0.4.1"

tailwind.config.cjs

module.exports = {
	content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
	plugins: [],
};

prettier.config.js

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
}

Not sure what is wrong, I tried both v3 and v2.8 for prettier but still not working. when saving it wont format the classes.
Sorry if this has been resolved with workaround, but I can't seem to find the solution

[hazlema]

You dont need to downgrade, just add this line "plugins": ["prettier-plugin-tailwindcss"] to .prettierrc.json

Works for me!

[vectorcr]

You dont need to downgrade, just add this line "plugins": ["prettier-plugin-tailwindcss"] to .prettierrc.json

Works for me!

Thanks for the assist! I was running into the same issue and your solution fixed it for me.

[aronmal]

prettier.config.js

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
}

@martinharyanto Without the require()

It is not a workaround, it it the new way to implement. Cause is the removed plugin autoloading in prettier v3 because of problems with package managers except npm.

[sy4578]

not working with above all commented pattern

[ronaldtveen]

Took me way too long to get this to work, getting confused by the comments above... It was actually very simple and straight forward to get it to work with the 3.x branch of prettier. This is what worked for me:

1. npm install -D prettier prettier-plugin-tailwindcss
   At the moment of writing
   • prettier v3.0.0
   • prettier-plugin-tailwindcss v0.4.1
2. Then in .prettierrc.json

{
  "semi": false,
  "tabWidth": 2,
  // [..]
  "plugins": ["prettier-plugin-tailwindcss"]
}

[stabildev]

Yes, it's working now and the issue is fixed

[jesusvallez]

You dont need to downgrade, just add this line "plugins": ["prettier-plugin-tailwindcss"] to .prettierrc.json

In a JS file also works .prettierrc.js

module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  arrowParens: 'always',
  jsxSingleQuote: false,
  printWidth: 120,
  plugins: ['prettier-plugin-tailwindcss'],
}

[mutheusalmeida]

You dont need to downgrade, just add this line "plugins": ["prettier-plugin-tailwindcss"] to .prettierrc.json

In a JS file also works .prettierrc.js

module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  arrowParens: 'always',
  jsxSingleQuote: false,
  printWidth: 120,
  plugins: ['prettier-plugin-tailwindcss'],
}

It just works with a .json file. Anyone know whats the matter?

[jesusvallez]

@mutheusalmeida as I said, it works for me in a js. Maybe you are missing some extra configuration in your project.

These are my prettier and eslint dependencies in case it can help you:

    "eslint": "8.46.0",
    "eslint-config-prettier": "8.9.0",
    "eslint-config-standard": "17.1.0",
    "eslint-config-standard-typescript-prettier": "6.0.0",
    "eslint-plugin-import": "2.28.0",
    "eslint-plugin-n": "15.7.0",
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-promise": "6.1.1",
    "eslint-plugin-unused-imports": "2.0.0",
    "prettier": "2.8.8",
    "prettier-plugin-tailwindcss": "0.4.1",

and this is my .eslintrc.js file

const config = require('eslint-config-standard-typescript-prettier')

module.exports = {
  ...config,
  ignorePatterns: ['*.js', 'vite.config.ts'],
  plugins: ['unused-imports'],
  parserOptions: { project: './tsconfig.json' },
  rules: {
    ...config.rules,
    '@typescript-eslint/no-explicit-any': 'error',
    '@typescript-eslint/no-empty-function': [
      'error',
      { allow: ['arrowFunctions'] },
    ],
    'no-unused-vars': 'off',
    'unused-imports/no-unused-imports': 'error',
    'unused-imports/no-unused-vars': [
      'warn',
      {
        vars: 'all',
        varsIgnorePattern: '^_',
        args: 'after-used',
        argsIgnorePattern: '^_',
      },
    ],
  },
}

[akomm]

I understand that the issue with changes in the prettier v3 API requires a lot of changes.

What I don't quite understand is why this issue is closed. Its more likely people will open new because they don't find an open issue related to their problem.

[FinnDore]

Because it's fixed!

[akomm]

Because it's fixed!

I have:

"prettier": "3.0.3",
"prettier-plugin-tailwindcss": "0.5.4"

My bad, its probably the vscode tailwind extension issue, because it does not automatically pick up the plugin anymore, so I have to add it to .prettierrc.json explicitly.

I think its a good idea to do it anyway, but before I had it in the short syntax with the prefix convention ("tailwindcss" instead of "prettier-plugin-tailwindcss"). Changing it now to the full package name fixed it.

[aronmal]

My bad, its probably the vscode tailwind extension issue, because it does not automatically pick up the plugin anymore, so I have to add it to .prettierrc.json explicitly.

The plugin search feature has been removed.

[ssalib-aamc]

I installed "prettier-plugin-tailwindcss": "0.4.1", instead of "prettier-plugin-tailwindcss": "^0.5.10",. Restarted VS Code and it worked.

[dinakar17]

I've uninstalled both prettier and prettier-plugin-tailwindcss (after installing them separately) and installed them together. Now all of a sudden it's working. I don't know why and how (I haven't restarted the VSCode Terminal)

There are two areas you need to check

package.json

.prettierrc

[Fred-O-Nyarko]

I went nuts on this.
NB: you don't have to downgrade your prettier.
These are my steps. (you can go manual or automate this)

1. Delete the plugins line
2. Run openapi codegen
3. Add the plugins line back

My package.json

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "codegen": "node generateApiCode.js",
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "prepare": "husky"
  },

generateApiCode.js

import { execSync } from "child_process";
import pkg from "fs-extra";

const { readFileSync, writeFileSync } = pkg;

const configFilePath = ".prettierrc";
const lineToRemove =
    '"plugins": ["@trivago/prettier-plugin-sort-imports","prettier-plugin-tailwindcss"],';

// Step 1: Read the file
const fileContent = readFileSync(configFilePath, "utf8");

// Step 2: Remove the specified line
const modifiedContent = fileContent
    .split("\n")
    .filter((line) => !line.includes(lineToRemove))
    .join("\n");

// Step 3: Write the modified content back to the file
writeFileSync(configFilePath, modifiedContent, "utf8");

// Step 4: Run the desired command (e.g., "your-command")
// Note: Replace 'your-command' with the actual command you want to run
try {
    execSync("npx @rtk-query/codegen-openapi src/redux/api/openapi-config.ts", {
        stdio: "inherit",
    });
} catch (error) {
    console.error("Error executing command:", error);
}

// Step 5: Add the original file contents
writeFileSync(configFilePath, fileContent, "utf8");

my .prettierrc file
{ "plugins": ["@trivago/prettier-plugin-sort-imports","prettier-plugin-tailwindcss"], "tailwindFunctions": ["clsx", "tw"] }
and finally I ignore .prettierrc in my .prettierignore file, so my script will work well as expected.

This is not the best solution, but it works