Prettier won't auto-fix longer Tailwind CSS class name stack according to print width

Question

Isn't Prettier supposed to auto-fix longer Tailwind CSS class name stack according to print width?

• Next.js Project: Github, package.json, .eslintrc.js, .prettierrc.js, example line
• Visual Studio Code: ESLint, Prettier, Tailwind CSS IntelliSense, settings.json

Behaviour

<input
  id="helloInput"
  placeholder="Type in hello"
  onChange={(e) => setText(e.target.value)}
  type="text"
  className="focus:shadow-outline mb-3 w-60 appearance-none rounded border border-purple-700 py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none dark:bg-slate-600 dark:text-gray-300" 
/>

Expected

<input
  id="helloInput"
  placeholder="Type in hello"
  onChange={(e) => setText(e.target.value)}
  type="text"
  className="focus:shadow-outline mb-3 w-60 appearance-none rounded border 
             border-purple-700 py-2 px-3 leading-tight text-gray-700 
             shadow focus:outline-none dark:bg-slate-600 
             dark:text-gray-300" 
/>

Answer 1

Upon further research, I realized that the issue I was facing has already been addressed by the Prettier team.

After delving into Prettier's issues and documentation, I discovered that the team had initially attempted to provide a solution for handling CSS libraries like Tailwind that result in a large number of classes on elements. However, they encountered difficulties with the heuristics used to determine where to split the class list onto multiple lines, and as a result, they decided to revert back on this particular feature. They mentioned in one of the issues that "our heuristics for where to split the class list on to multiple lines were unable to consistently produce good results. We’re still considering better ways to format HTML with lots of classes."

For further information, you can refer to the following resources:

• Issue 13789: Prettier don't wrap html classes with specific PrintWidth
• Issue 10918: Disabling "smart formatting" of HTML class attribute
• Issue 7863: P2.x - Group HTML classes by prefix instead of forcing onto one line
• Blog post: Collapse HTML class attributes onto one line

Although the feature I was seeking didn't work out as intended, it's worth keeping an eye on the ongoing discussions in the Prettier issue tracker. The team seems to be actively considering alternative approaches to improve the formatting of HTML with a large number of classes. With future releases, we may see advancements in this area.