Videos
» npm install prettier-plugin-tailwindcss
» npm install prettier-plugin-tailwind-css
Edit: For anyone wondering: The Tailwind Prettier Plugin is not comptible with Prettier v3.0 (https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/176). You have to downgrade to v2.8.8
As soon as I add the plugins line to .prettierrc Prettier won't work anymore at all.
» npm install prettier-plugin-tailwind
I think this problem might be caused by changes in Prettier v3.0. You can try fixing it by going back to Prettier v2.8.8 with these steps:
npm uninstall prettier prettier-plugin-tailwindcss
npm install -D [email protected] [email protected]
Plugin is incompatible with Prettier v3.0 - github issue
Edit:
As of the prettier-plugin-tailwindcss version 0.5.4, this issue should now be resolved. You can update your dependencies with the following commands:
npm install -D prettier prettier-plugin-tailwindcss
Additionally, don't forget to include the following configuration in your prettier.config.js file:
module.exports = {
plugins: ['prettier-plugin-tailwindcss'],
}
Lastly, make sure to reload Visual Studio Code for the changes to take effect. For more information, please refer to this GitHub comment.
I am using Visual Studio Code Editor:
To begin, install prettier-plugin-tailwindcss as a dev dependency, which it seems you've already done:
npm install -D prettier prettier-plugin-tailwindcss
This command will install the latest versions of both Prettier and the Prettier Tailwind CSS plugin.
Next, you'll need to update your package.json file. Append the following configuration at the end:
"prettier": {
"plugins": [
"prettier-plugin-tailwindcss"
]
}
Ensure your package.json mirrors this structure:
This setup will integrate Tailwind CSS with Prettier in your project.
I just encountered this problem even though I had everything installed and setup correctly. It got resolved after reloading VS Code through "Command Palette (CTRL + SHIFT + P) > Reload Window". Hope this helps!
I encountered this problem too before. Though I just tried adding the Tailwind Prettier plugin to a new Remix project and everything seems to be working. Here are the steps I performed:
Installed Tailwind
npm install -D tailwindcss postcss autoprefixer concurrentlyAfter finishing all the steps outlined in the link above, I ran
npm install -D prettier prettier-plugin-tailwindcss
I don't have a prettier config file in place. I'm able to run Prettier through vscode and I can confirm that the Tailwind classes are automatically sorted.