Prettier未按打印宽度自动拆分过长Tailwind CSS类名问题

问题排查与修复步骤 #

1. 安装Prettier Tailwind专用插件 #

Prettier原生不支持Tailwind类名的智能换行，必须依赖prettier-plugin-tailwindcss插件实现该功能。如果项目中未安装，执行以下命令：

npm install prettier-plugin-tailwindcss --save-dev
# 或使用yarn
yarn add prettier-plugin-tailwindcss --dev
# 或使用pnpm
pnpm add prettier-plugin-tailwindcss --save-dev

2. 配置Prettier加载插件 #

在项目根目录的.prettierrc.js中添加插件配置，同时确保打印宽度设置合理（比如80或100，根据需求调整）：

module.exports = {
  printWidth: 80,
  trailingComma: 'es5',
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  plugins: ['prettier-plugin-tailwindcss'], // 新增插件配置
}

3. 调整VS Code格式化优先级 #

避免ESLint与Prettier的格式化冲突，确保VS Code默认使用Prettier作为格式化器：
在.vscode/settings.json中配置：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.format.enable": false,
  "tailwindCSS.experimental.classRegex": ["className=\"([^\"]*)\""]
}

4. 验证格式化效果 #

重启VS Code后，打开目标文件，使用快捷键Ctrl+Shift+I（Windows/Linux）或Cmd+Shift+I（Mac）手动触发格式化，查看Tailwind类名是否按打印宽度自动换行。

效果对比 #

当前未生效的格式化结果 #

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

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