8. 编辑器配置：VS Code 智能提示

Tailwind 的类名那么多，没人能全背下来。官方插件解决了这个问题。

安装 Tailwind CSS IntelliSense

打开 VS Code，进 Extensions（快捷键 Ctrl+Shift+X），搜索 Tailwind CSS IntelliSense，点安装。

作者是 Brad Cornes，就是 Tailwind 官方的人。

它能做什么

装好之后，你在写 class="..." 时就能获得：

自动补全：输入 text- 会弹出 text-xs、text-sm、text-base、text-lg 等选项，带颜色预览。

悬停预览：鼠标悬停在一个类名上，会显示它编译后的完整 CSS：

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

语法高亮：@theme、@source、@custom-variant 这些 Tailwind 自定义指令会正确高亮，不会报错。

错误检查：写了不存在的类名，底下会画红色波浪线。

配置（可选）

大多数情况下默认配置就够用。如果你遇到 CSS 文件里 @theme 被 VS Code 原生校验报错，可以在设置里禁用 CSS 校验：

{
  "css.validate": false,
  "scss.validate": false,
  "less.validate": false
}

或者只在 Tailwind 项目里禁用，在工作区设置（.vscode/settings.json）里加：

{
  "css.validate": false,
  "tailwindCSS.experimental.configFile": null
}

推荐搭配：Prettier 插件

Tailwind 官方还维护了一个 Prettier 插件，能自动按推荐顺序排序类名：

npm install -D prettier-plugin-tailwindcss

然后在 .prettierrc 里加：

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

保存文件时，类名会自动重排：

<!-- 排序前 -->
<button class="text-white px-4 py-2 bg-sky-700 hover:bg-sky-800">

<!-- 排序后 -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800">

顺序规则是：定位/布局 → 盒模型 → 排版 → 颜色 → 视觉效果。统一排序后代码更易读。

其他编辑器支持

编辑器	支持方式
VS Code	官方 IntelliSense 插件
Cursor	兼容 VS Code 扩展，直接装
Zed	内置支持，无需插件
JetBrains (WebStorm 等)	内置 Tailwind 补全
Neovim	通过 LSP 配置

常见问题

Q：装了插件但没提示？ 确认项目根目录有 package.json 且 tailwindcss 在依赖里。插件需要检测到 Tailwind 安装才能激活。

Q：提示出现了但很多类名找不到？ 检查你的 CSS 文件里有没有 @import "tailwindcss";。没有这行，插件不知道你在用 Tailwind。

Q：在 Vue/React 文件的 className 里没提示？ 插件默认支持 class 和 className。如果还不灵，检查文件类型是否正确识别（右下角显示 Vue/React）。

下一章我们深入工具类优先的核心理念。