编辑器设置
使用 Tailwind CSS 时改善开发人员体验的工具。
语法支持
Tailwind CSS 使用自定义 CSS 语法，如 @theme 、 @variant 和 @source ，在某些编辑器中，如果这些规则无法识别，则可能会触发警告或错误。
如果您使用的是 VS Code，我们的官方 Tailwind CSS IntelliSense 插件包含专用的 Tailwind CSS 语言模式，该模式支持 Tailwind 使用的所有自定义规则和函数。
在某些情况下，如果您的编辑器对 CSS 文件中的语法要求非常严格，则可能需要禁用本机 CSS linting/验证。
VS Code 的 IntelliSense
Visual Studio Code 的官方 Tailwind CSS IntelliSense 扩展通过为用户提供自动完成、语法突出显示和 linting 等高级功能增强了 Tailwind 开发体验。
- 自动补全 — 为实用程序类以及 CSS 函数和指令 提供智能建议。
- Linting — 突出显示 CSS 和标记中的错误和潜在缺陷。
- 悬停预览 — 将鼠标悬停在实用程序类上时显示其完整的 CSS。
- 语法高亮 — 以便正确高亮使用自定义 CSS 语法的 Tailwind 功能。
查看 GitHub 上的 项目以了解更多信息，或 将其添加到 Visual Studio Code 以立即开始。
使用 Prettier 进行类别排序
我们为 Tailwind CSS 维护一个官方的 Prettier 插件 ，它会按照我们 推荐的类顺序 自动对您的类进行排序。
它可以与自定义 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 IDEs
JetBrains IDE（例如 WebStorm、PhpStorm 等）支持 HTML 中的智能 Tailwind CSS 补全。