Tailwind CSS home page
  1. 新手入门
  2. 编辑器设置

语法支持

¥Syntax support

Tailwind CSS 使用大量自定义 CSS at 规则，如 @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 智能感知 插件包括一个专用的 Tailwind CSS 语言模式，它支持 Tailwind 使用的所有自定义规则和函数。

¥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 linting/验证。

¥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 智能感知 扩展通过为用户提供自动补齐、语法高亮和 linting 等高级功能来增强 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 函数和指令.

    ¥Autocomplete. Intelligent suggestions for class names, as well as CSS functions and directives.

  • 代码检查。高亮 CSS 和标记中的错误和潜在错误。

    ¥Linting. Highlights errors and potential bugs in both your CSS and your markup.

  • 悬停预览。将鼠标悬停在 Tailwind 类名称上可查看完整的 CSS。

    ¥Hover Previews. See the complete CSS for a Tailwind class name by hovering over it.

  • 语法高亮。提供语法定义，以便正确高亮 Tailwind 功能。

    ¥Syntax Highlighting. Provides syntax definitions so that Tailwind features are highlighted correctly.

查看项目 在 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

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

¥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 IDE

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 支持的更多信息 →

¥Learn more about Tailwind CSS support in JetBrains IDEs →