如何提升TailwindCSS类名代码可读性？求VSCode/CLI格式化工具

VSCode 插件方案 #

• Tailwind CSS IntelliSense（官方插件）
  自带className格式化功能，能自动将超长的className拆分为多行并缩进。只需在VSCode设置中确认tailwindCSS.experimental.classRegex已匹配你的文件类型（比如React的className="([^"]*)"），开启保存自动格式化后，每次保存都会自动处理长className。

• Prettier + prettier-plugin-tailwindcss
  Prettier是通用代码格式化工具，搭配Tailwind专属插件后，会按照Tailwind的优先级对className排序并智能拆行，格式规整且符合团队规范。安装两个依赖后，在项目根目录的.prettierrc中配置插件：

  {
    "plugins": ["prettier-plugin-tailwindcss"]
  }
  

  之后无论是手动触发格式化还是保存自动格式化，都会处理长className。

CLI 工具方案 #

使用Prettier CLI配合prettier-plugin-tailwindcss，可以批量格式化项目中所有文件的className。在终端运行以下命令（根据你的文件类型调整路径）：

npx prettier --write ./src/**/*.{jsx,tsx}

这会自动遍历指定目录下的文件，将所有过长的className拆分为易读的多行格式。

效果示例 #

原长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"

格式化后：

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
"

内容的提问来源于stack exchange，提问作者Yakitori