tailwindlabs/prettier-plugin-tailwindcss

bug: formatting lost with the new version of the plugin

ovflowd opened this issue · 2 comments

What version of prettier-plugin-tailwindcss are you using?

0.6.1

What version of Tailwind CSS are you using?

3.4.3

What version of Node.js are you using?

v20.11.1

What package manager are you using?

NPM

What operating system are you using?

Windows 11

Reproduction URL

nodejs/nodejs.org#6803 (Specifically: https://github.com/nodejs/nodejs.org/tree/583b5ca191e1e8f478f9a3d31affefcbe365339c)

Describe your issue

Upgrading the prettier plugin from 0.5.14 to 0.6.1 causes prettier to force all class names to be within the same line.

On our project, we intentionally separated each Tailwind token per line to improve readability, and this was working fine, and the plugin was still nicely sorting the tokens and removing duplicates. But now, it is breaking the formatting.

image

I didn't see this mentioned anywhere within the changelog so I assume it is a bug

As of v0.6.0 our plugin now removes whitespace around classes by default — this includes new lines — but there is an option to disable it. Add the following to your prettier config (whether that be in .prettierrc, prettier.config.js, package.json, etc…):

{
  // … your config
  "tailwindPreserveWhitespace": true
}

And it is in the change log :)

Remove extra whitespace around classes (#272)

Hope that helps! ✨

I saw that entry on the changelog but did not connect the dots. That's awesome, thanks for the quick reply :)