在VS Code中如何让TailwindCSS类名每行单独换行显示

下面是两种可直接落地的实现方案，都能达到你需要的类名单独换行效果：

方案1：官方推荐Prettier集成方案（适配所有支持的文件类型） #

这是Tailwind官方推荐的类名管理方案，同时支持类名自动排序和换行：

• 先安装VS Code扩展Prettier - Code formatter，再在项目根目录执行命令安装依赖：
  npm install -D prettier prettier-plugin-tailwindcss
• 在项目根目录新建/修改.prettierrc配置文件，添加以下内容：

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "printWidth": 1,
  "singleAttributePerLine": true
}

配置完成后保存文件时，Prettier会自动将class属性内的每个类名拆分为单独一行。

方案2：无额外依赖的VS Code内置配置 #

如果不想引入格式化工具，可通过VS Code自带配置+官方Tailwind扩展实现：

• 先安装VS Code官方扩展Tailwind CSS IntelliSense
• 打开VS Code设置面板（快捷键Ctrl+,/Cmd+,），切换到JSON编辑模式，添加对应文件类型的配置：

// 适配HTML文件
"html.format.wrapAttributes": "force",
"html.format.wrapLineLength": 0,
// 适配JSX/TSX文件
"javascript.format.wrapAttributes": "force",
"typescript.format.wrapAttributes": "force",
// 适配Vue文件（需提前安装Volar扩展）
"vue.format.wrapAttributes": "force"

配置完成后调用VS Code自带格式化功能（快捷键Shift+Alt+F/Shift+Option+F）即可实现类名自动换行。

最终实现效果 #

<div class="
w-full
h-full
flex
items-center
justify-center
">

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