next.js Prettier不会根据打印宽度自动修复较长的Tailwind CSS类名堆栈

sg2wtvxw  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(284)

Prettier不是应该根据打印宽度自动修复更长的Tailwind CSS类名堆栈吗?

行为

<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" 
/>

预期

<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" 
/>
k2arahey

k2arahey1#

经过进一步研究,我意识到我面临的问题已经被Prettier团队解决了。
在深入研究Prettier的问题和文档之后,我发现团队最初试图提供一个解决方案来处理CSS库,比如Tailwind,这些库导致元素上的大量类。然而,他们在确定将类列表拆分到多行的位置时遇到了困难,因此,他们决定恢复这个特定的特性。他们在其中一个问题中提到,“我们的启发式方法无法始终如一地产生良好的结果。我们仍在考虑更好的方法来格式化HTML与许多类。
有关详细信息,您可以参考以下资源:

虽然我正在寻找的功能没有按预期工作,但值得关注Prettier问题跟踪器中正在进行的讨论。该团队似乎正在积极地考虑替代方法来改进HTML的格式与大量类。在未来的版本中,我们可能会看到这方面的进步。

相关问题