编辑器设置

语法支持

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

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

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

VS Code 的 IntelliSense

官方的 Tailwind CSS IntelliSense 扩展为 Visual Studio Code 提升了 Tailwind 开发体验，提供了高级功能，如自动完成、语法高亮和语法检查。

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

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

使用 Prettier 进行类排序

我们维护一个官方的 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 IDEs

JetBrains 的 IDE，如 WebStorm、PhpStorm 等，在 HTML 中支持智能的 Tailwind CSS 补全。

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