Html 有没有一种方法可以提高代码中tailwind 类名的可读性

发布于10月03日

当使用Tailwincss时，className字段很容易在右侧伸展，这使得阅读和编辑变得困难.

下面是一个例子:

className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"个

如果您的编辑器上有两个窗口，其中的一部分很可能是不可见的.

有没有VSCode或CLI工具来缩进并提高可读性？

谢谢!

推荐答案

第一件事是保持课程从外部到内部的顺序. 如边距&>；宽度/高度&>边框&>填充等...
下一步是从元素的默认状态保留诸如:HOVER:VISTED这样的操作
第三步是保留框架/核心之外的定制类
在课程结束时，蛇人开设了课程，唯一的目的是成为js锚(不像我推荐的那样，但经常看到)

许多人不喜欢下一步，但你经常可以看到人们在垂直布局中保留着很长的类别/风格列表

在我看来，长元素读取类的方法更好，但也需要几个字节，而且它让您同时看到更少的代码.

<html>
<body>
   <div className="
     group
     rounded-lg
     border
     border-transparent
     px-5
     py-4
     transition-colors
     hover:border-gray-300
     hover:bg-gray-100
     hover:dark:border-neutral-700
     hover:dark:bg-neutral-800/30
     "
   >
      Content
   </div>
</body>
</html>

最糟糕的方式是将其混合为:

<html>
<body>
   <div className="
     group
     rounded-lg border border-transparent
     px-5 py-4
     transition-colors
     hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30
     "
   >
      Content
   </div>
</body>
</html>

国际海事组织.它最糟糕的原因是，如果行太长，一些行可能会被包装起来，这将扰乱层次 struct .