编辑器设置

语法支持

Tailwind CSS 使用了自定义的 CSS 语法，如 @theme、@variant 和 @source，在某些编辑器中，这些规则可能会触发警告或错误，因为它们无法识别这些语法。

如果你使用的是 VS Code，我们的官方 Tailwind CSS IntelliSense 插件包含了一个专门的 Tailwind CSS 语言模式，支持所有 Tailwind 使用的自定义 at-rules 和函数。

在某些情况下，如果你的编辑器对 CSS 文件中预期的语法非常严格，你可能需要禁用原生的 CSS 代码检查/验证。

VS Code 的 IntelliSense

Visual Studio Code 的官方 Tailwind CSS IntelliSense 扩展通过提供高级功能（如自动完成、语法高亮和代码检查）来增强 Tailwind 开发体验。

• 自动完成 — 为工具类以及 CSS 函数和指令 提供智能建议。
• 代码检查 — 在 CSS 和标记中突出显示错误和潜在的 bug。
• 悬停预览 — 当你悬停在工具类上时，显示完整的 CSS。
• 语法高亮 — 使用自定义 CSS 语法的 Tailwind 功能能够被正确高亮显示。

查看 GitHub 上的项目了解更多信息，或 添加到 Visual Studio Code 立即开始使用。

使用 Prettier 进行类排序

我们维护着一个官方的 Tailwind CSS Prettier 插件，它可以按照我们推荐的类顺序自动排序你的类。

它可以无缝地与自定义 Tailwind 配置一起工作，而且因为它只是一个 Prettier 插件，所以它可以在任何支持 Prettier 的地方工作——包括每个流行的编辑器和 IDE，当然也包括命令行。

<!-- 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

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

了解更多关于 JetBrains IDE 中的 Tailwind CSS 支持 →