编辑器设置

改善使用 Tailwind CSS 时开发体验的工具。

语法支持

Tailwind CSS 使用 @theme、@variant、@source 等自定义 CSS 语法，在部分编辑器中，这些规则可能因无法识别而触发警告或报错。

如果你使用 VS Code，我们官方的 Tailwind CSS IntelliSense 插件包含专用的 Tailwind CSS 语言模式，支持 Tailwind 使用的全部自定义 at-rule 和函数。

某些情况下，如果你的编辑器对 CSS 文件中的语法非常严格，可能需要关闭原生 CSS lint / 校验。

Cursor

Cursor 是一款原生面向 AI 的代码编辑器，提供上下文感知自动补全和内置 coding agent 等功能。由于它支持 VS Code 扩展，你已经熟悉的 Tailwind CSS 工具开箱即用——包括官方 Tailwind CSS IntelliSense 扩展，以及用于 class 排序的 Prettier 插件。

前往查看并下载 Cursor。

Zed

Zed 是一款快速、现代的代码编辑器，从零开始为前沿开发工作流设计，包括与 AI 协作的 agentic 编辑。它内置 Tailwind CSS 自动补全、lint 和悬停预览，无需安装和配置额外扩展。它也与 Prettier 深度集成，安装官方 Prettier 插件 后即可在 Zed 中无缝使用。

了解 Zed，以及它如何与 Tailwind CSS 配合。

VS Code 的 IntelliSense

面向 Visual Studio Code 的官方 Tailwind CSS IntelliSense 扩展通过自动补全、语法高亮和 lint 等高级功能，提升 Tailwind 开发体验。

• 自动补全 —
  为 utility class 以及 CSS 函数与指令 提供智能建议。
• Lint —
  在 CSS 和标记中高亮错误与潜在问题。
• 悬停预览 —
  悬停在 utility class 上时显示完整 CSS。
• 语法高亮 —
  让使用自定义 CSS 语法的 Tailwind 特性正确高亮。

前往 GitHub 了解更多，或添加到 Visual Studio Code 立即开始使用。

使用 Prettier 排序 class

我们为 Tailwind CSS 维护官方 Prettier 插件，会按推荐的 class 顺序 自动排序。

它能与自定义 Tailwind 配置无缝配合；而且它只是一个 Prettier 插件，因此凡是 Prettier 能用的地方都能用——包括各类主流编辑器和 IDE，当然也包括命令行。

HTML

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">Submit</button>

<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">Submit</button>

前往 GitHub 了解该插件并开始使用。

JetBrains IDE

WebStorm、PhpStorm 等 JetBrains IDE 在 HTML 中内置了智能的 Tailwind CSS 补全支持。

了解 JetBrains IDE 中的 Tailwind CSS 支持 →