Tailwind CSS home page
  1. 立即开始
  2. 编辑器设置

语法支持(Syntax support)

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

🌐 Tailwind CSS uses a lot of custom CSS at-rules like @tailwind, @apply, and @config, and in many editors this can trigger warnings or errors where these rules aren’t recognized.

解决这个问题的方法几乎总是为你的编辑器/IDE安装一个支持 PostCSS 语言的插件，而不是使用普通的 CSS。

🌐 The solution to this is almost always to install a plugin for your editor/IDE for PostCSS language support instead of regular CSS.

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

🌐 If you’re using VS Code, our official Tailwind CSS IntelliSense plugin includes a dedicated Tailwind CSS language mode that has support for all of the custom at-rules and functions Tailwind uses.

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

🌐 In some cases, you may need to disable native CSS linting/validations if your editor is very strict about the syntax it expects in your CSS files.

VS Code 的智能感知(IntelliSense for VS Code)

Visual Studio Code 的官方 Tailwind CSS IntelliSense 扩展通过提供自动补齐、语法高亮和代码检查等高级功能，提升了 Tailwind 的开发体验。

🌐 The official Tailwind CSS IntelliSense extension for Visual Studio Code enhances the Tailwind development experience by providing users with advanced features such as autocomplete, syntax highlighting, and linting.

Tailwind CSS IntelliSense extension for Visual Studio Code
  • 自动补齐。为类名以及CSS 函数和指令提供智能建议。
  • 代码检查。高亮你的 CSS 和标记中的错误和潜在的漏洞。
  • 悬停预览。将鼠标悬停在 Tailwind 类名上即可查看完整的 CSS。
  • 语法高亮。提供语法定义，以便 Tailwind 功能能够被正确高亮显示。

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

🌐 Check out the project on GitHub to learn more, or add it to Visual Studio Code to get started now.

使用 Prettier 自动类排序(Automatic class sorting with Prettier)

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

🌐 We maintain an official Prettier plugin for Tailwind CSS that automatically sorts your classes following our recommended class order.

它可以无缝地与自定义 Tailwind 配置一起使用，而且由于它只是一个 Prettier 插件，它可以在 Prettier 可用的任何地方使用——包括所有流行的编辑器和 IDE，当然也可以在命令行中使用。

🌐 It works seamlessly with custom Tailwind configurations, and because it’s just a Prettier plugin, it works anywhere Prettier works — including every popular editor and IDE, and of course on the command line.

<!-- 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 上的插件，了解更多信息并开始使用。

🌐 Check out the plugin on GitHub to learn more and get started.

JetBrains IDEs

像 WebStorm、PhpStorm 等 JetBrains IDE 支持在 HTML 中以及使用 @apply 时提供智能 Tailwind CSS 补全功能。

🌐 JetBrains IDEs like WebStorm, PhpStorm, and others include support for intelligent Tailwind CSS completions in your HTML and when using @apply.

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