prettier: JSX `className` attribute does not wrap like HTML `class` attribute

+1 on this issue!

Prettier has now chosen to not warp CSS classes anymore. This issue can be closed

This seems like the logical path forward since the prettier team has decided long inline css classes should be multi lined. Would love to see this implemented

Any updates on this?

I recently dipped into TailwindCSS, and found that my JSX/TSX components now have very long unwrapped lines due to long className attributes, which reduces readability. Is it possible to port the existing work done for the HTML parser to the JSX/Babel parser? With frameworks like tailwind becoming more popular, this seems like something that would impact lots of developers (but I could be wrong 😃 ).

Related Issues:

• #5482
• #7865

Prettier 2.2.1 Playground link

--parser babel

Input:

function Avatar () {
  return <div className="rounded-full w-[100px] h-[100px] bg-gray-200 flex-shrink-0 another-class and-another-class-and-another"></div>
}

Output:

function Avatar() {
  return (
    <div className="rounded-full w-[100px] h-[100px] bg-gray-200 flex-shrink-0 another-class and-another-class-and-another"></div>
  );
}

Expected behavior:

function Avatar() {
  return (
    <div
      className="
        rounded-full w-[100px] h-[100px] bg-gray-200 flex-shrink-0
        another-class and-another-class-and-another
      "
    ></div>
  );
}

Or at least something close to it: wrapping the classnames into separate lines.

Im using Tailwind too, mostly with Vue, and i have the exact same expectation, it looks like Vetur some how has solved very nicely :

Input

<div 
  class="shadow-xl relative h-60 w-full rounded-lg bg-rose-600 overflow-hidden"
>
</div>

Output

<div
    class="
       shadow-xl
       relative
       h-60
       w-full
       rounded-lg
       bg-rose-600
       overflow-hidden
      "
>
</div>

status:needs discussion = This issue needs discussion and ultimately a decision to be made before it is actionable.

see https://github.com/prettier/prettier/wiki/Issue-Labels

Our best solution to this problem is to group your classes and let Prettier format the array, eg:

<div
  className={cx(
    'flex-grow flex-shrink-0 flex flex-col items-center',
    'border-b border-gray-100 dark:border-dark-black-800',
  )}
/>

@u3u Currently supported for JavaScript, TypeScript, and Vue code.

As you can see in the last section of the README, prettier-plugin-merge is additionally required to apply the two plugins sequentially, and can be configure as follows.

{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "prettier-plugin-classnames",
    "prettier-plugin-merge"
  ]
}

This solution works well! Thank you.

@u3u Currently supported for JavaScript, TypeScript, and Vue code.

As you can see in the last section of the README, prettier-plugin-merge is additionally required to apply the two plugins sequentially, and can be configure as follows.

{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "prettier-plugin-classnames",
    "prettier-plugin-merge"
  ]
}

Prettier has now chosen to not warp CSS classes anymore. This issue can be closed

… so now, in projects using TailwindCSS, any change to classes by 2 different developers will always lead to a merge conflict. Perfect. I thought the purpose of Prettier was to standardize syntax and formatting so as to minimize conflicts introduced by individual sorting/preferences?

It used to be that a dev could change colors, and another dev could change margins, and it would merge nicely because the DIFF was spread across different lines…

Not giving a Prettier config option for a decision as major as this one seems irresponsible, forcing code-bases to stay on older versions of Prettier (like our major code-base now has to do in order to avoid massive DIFFs and conflicts) or move away from Prettier altogether…

Any progress on this by any chance?

@ony3000 Thank you! I will give it a try.