Can't get prettier-plugin-tailwindcss to work on Nextjs App – Prettier

The Solutions:

Solution 1: Downgrading Prettier to Version 2.8.8

The issue may stem from Prettier version 3.0. To resolve it, downgrade to Prettier version 2.8.8 by running the following commands:

npm uninstall prettier prettier-plugin-tailwindcss
npm install -D [email protected] [email protected]

Solution 2: Updating to Prettier Version >= 0.5.4 and Configuring Prettier

This issue has been addressed in prettier-plugin-tailwindcss version 0.5.4. Update your dependencies with these commands:

“`
npm install -D prettier prettier-plugin-tailwindcss
“`

Additionally, add the following configuration to your prettier.config.js file:

“`
module.exports = {
plugins: [‘prettier-plugin-tailwindcss’],
};
“`

Restart Visual Studio Code for the changes to take effect.

Solution 2: Install Prettier in prettier-plugin-tailwindcss

Navigate to the node_modules/prettier-plugin-tailwindcss directory and install Prettier using the following command:

cd ./node_modules/prettier-plugin-tailwindcss
npm i prettier

This will ensure that Prettier is available within the plugin and should resolve the autoloading issue.

Solution:

Redefine the Prettier configuration in package.json:

To use the Prettier Tailwind CSS plugin, it’s crucial to update the Prettier configuration in your package.json file. Append this configuration at the end of the file:

"prettier": {
    "plugins": [
      "prettier-plugin-tailwindcss"
    ]
  }

Ensure the following structure in package.json:

Restart Visual Studio Code Editor:

After updating package.json, restart your Visual Studio Code Editor for the changes to take effect.

Note: If the issue persists, it’s worth checking the IntelliSense settings in your editor to ensure that Prettier is recognized.

Solution 4: Update and Restart

Update the prettier-plugin-tailwindcss package and restart your Integrated Development Environment (IDE), such as WebStorm. This often resolves issues with classes order errors during next build and eliminates errors in the IDE.

Video Explanation: