编辑器设置

语法支持

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 和标记中突出显示错误和潜在错误。
• 悬停预览 — 当您悬停在工具类上时显示完整的 CSS。
• 语法高亮 — 使用自定义 CSS 语法的 Tailwind 功能能够正确高亮显示。

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

使用 Prettier 进行类排序

我们为 Tailwind CSS 维护了一个官方 Prettier 插件，它会按照我们的推荐类顺序自动排序您的类。

它与自定义 Tailwind 配置无缝协作，由于它只是一个 Prettier 插件，它在 Prettier 工作的任何地方都能工作——包括所有流行的编辑器和 IDE，当然还有命令行。

<!-- 之前 --><button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">提交</button><!-- 之后 --><button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">提交</button>

在 GitHub 上查看插件了解更多信息并开始使用。

JetBrains IDE

WebStorm、PhpStorm 等 JetBrains IDE 包含对 HTML 中智能 Tailwind CSS 完成的支持。

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