编辑器设置

​语法支持

Tailwind CSS 使用大量自定义 CSS at 规则，例如 @tailwind, @apply, 和 @config, 在许多编辑器中，这可能会在无法识别这些规则的情况下触发警告或错误。

解决方法通常是为您的编辑器/IDE 安装一个支持 PostCSS 语言的插件，而不是使用普通的 CSS 插件。

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

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

​IntelliSense for VS Code

Visual Studio Code 的官方 Tailwind CSS IntelliSense 扩展通过为用户提供自动完成、语法突出显示和 linting 等高级功能来增强 Tailwind 开发体验。

• 自动完成：类名以及 CSS 函数和指令的智能建议。
• 检测：突出显示 CSS 和标记中的错误和潜在错误。
• 悬停预览：将鼠标悬停在 Tailwind 类名称上即可查看其完整 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">...</button>
                
<!-- After -->
<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

WebStorm、PhpStorm 等 JetBrains IDE 包括对 HTML 中以及使用 @apply 时的智能 Tailwind CSS 补全的支持。

了解有关 JetBrains IDE 中的 Tailwind CSS 支持的更多信息 →