编辑器设置

语法支持

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

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

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

VS Code 的智能感知

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

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

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

使用 Prettier 进行类排序

我们维护一个官方的 Prettier 插件 用于 Tailwind CSS，它可以按照我们 推荐的类顺序 自动对您的类进行排序。

它可以与自定义 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 支持的更多信息 →