Tailwind CSS - 编辑器设置

现代开发：为 Tailwind CSS 设置你的编辑器

专业的开发工作流程依赖于配置良好的编辑器。对于 Tailwind CSS 而言，适当的设置可以提供自动补全、类排序和代码检查（linting）功能，显著提高你的生产力与代码质量。

1. 基础：项目设置

在配置编辑器之前，你的项目必须先设置好使用 Tailwind 的构建过程。Play CDN 仅用于演示。实际项目会使用包管理器和 Tailwind CLI。

# 1. 进入你的项目文件夹
cd my-tailwind-project

# 2. 如果尚未初始化 Node.js 项目，请先初始化
npm init -y

# 3. 安装 Tailwind 的对等依赖
npm install -D tailwindcss postcss autoprefixer

# 4. 生成配置文件
npx tailwindcss init -p

# 这将创建 `tailwind.config.js` 和 `postcss.config.js` 文件。

然后，你必须配置 tailwind.config.js 中的 content 数组，以扫描你的模板文件（例如 ./src/**/*.html）并运行构建过程。

2. 必备：VS Code 扩展

尽管许多编辑器都支持 Tailwind，但 Visual Studio Code 拥有顶级的工具集。

必备：Tailwind CSS IntelliSense

这是 Tailwind Labs 官方推出的扩展。对于严肃的开发工作来说，它是不可或缺的。

• 自动补全（Autocomplete）：在你输入时智能地建议类名。
• 代码检查（Linting）：警告你可能存在的冲突（例如 p-2 和 p-4）以及未知的类。
• 悬停预览（Hover Preview）：显示你悬停的任何 Tailwind 类所对应的底层 CSS。
• 读取 tailwind.config.js：所有自动补全都会识别你的自定义主题，包括你自己的颜色、间距和变体。

强烈推荐：Prettier + Tailwind CSS 插件

为了保持一致的代码风格，尤其是在团队协作中，请使用 Prettier。官方的 Tailwind CSS Prettier 插件会在保存时自动以逻辑、一致的顺序排序你的类。这使得长类列表具有高度可读性和可维护性。

# 安装 Prettier 和插件
npm install -D prettier prettier-plugin-tailwindcss

# 创建 Prettier 配置文件 `.prettierrc.json`
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

# 建议同时安装 Prettier VS Code 扩展。

3. 锦上添花的扩展

这些扩展可以进一步改善你的工作流程：

• Tailwind Fold：此扩展将 HTML 中过长的 class="..." 属性折叠起来，只显示一个简洁的摘要。点击它会展开完整列表。这显著提高了组件结构的可读性。
• Tailwind Documentation：无需离开编辑器，即可在侧边栏中快速搜索 Tailwind 官方文档。它是查找正确类名的便捷速查表。

为什么不只使用常规 CSS 代码检查？

标准的 CSS 代码检查器（linters）或验证器会对 Tailwind 特定的语法（如 @tailwind、@apply 和 theme()）报错。Tailwind CSS IntelliSense 扩展能正确理解这些语法并提供正确的验证，这就是为什么它是你进行 Tailwind CSS 文件代码检查时唯一需要的工具。