Tailwind CSS 主页
  1. 开始
  2. 编辑器设置

语法支持

Tailwind CSS 使用了很多自定义 CSS at-rules，如 @tailwind、@apply 和 @config，在许多编辑器中，这可能会触发警告或错误，因为这些规则未被识别。

解决此问题的办法几乎总是为你的编辑器/IDE 安装一个 PostCSS 语言支持插件，而不是常规 CSS。

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

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

VS Code 的 IntelliSense

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

Tailwind CSS IntelliSense extension for Visual Studio Code
  • 自动完成。针对类名以及 CSS 函数和指令 提供智能建议。
  • Linting。突出显示 CSS 和标记中的错误和潜在 bug。
  • 悬停预览。通过悬停在 Tailwind 类名上查看其完整的 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">...</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 IDE

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

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