入门
编辑器设置
用于提升开发者在使用 Tailwind CSS 时体验的工具。
语法支持(Syntax support)
Tailwind CSS 使用自定义 CSS 语法，如 @theme、@variant 和 @source，在某些编辑器中，如果这些规则未被识别，可能会触发警告或错误。
🌐 Tailwind CSS uses custom CSS syntax like @theme, @variant, and @source, and in some editors this can trigger warnings or errors where these rules aren't recognized.
如果你正在使用 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.
Cursor
Cursor 是一款原生 AI 代码编辑器，具有上下文感知的自动补齐功能和内置的编码助手。由于它支持 VS Code 扩展，你已经熟悉的所有 Tailwind CSS 工具都可以开箱即用——包括我们官方的 Tailwind CSS IntelliSense 扩展以及用于类排序的 Prettier 插件。
查看并下载 Cursor。
🌐 Check out and download Cursor.
Zed
Zed 是一款快速、现代的代码编辑器，从零开始设计，面向前沿开发工作流程，包括使用 AI 的自主编辑。它内置支持 Tailwind CSS 自动补全、代码检查和悬停预览，无需安装和配置额外的扩展。它还与 Prettier 紧密集成，因此安装后我们的官方 Prettier 插件 能与 Zed 无缝协作。
查看 Zed，并了解更多关于 它如何与 Tailwind CSS 一起工作 的信息。
🌐 Check out Zed and learn more about how it works with Tailwind CSS.
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.
- 自动补齐 — 为实用类以及CSS 函数和指令提供智能建议。
- 代码检查 — 高亮显示你的 CSS 和标记中的错误及潜在的漏洞。
- 悬停预览 — 当你将鼠标悬停在实用类上时，显示完整的 CSS。
- 语法高亮 — 让使用自定义 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 进行类排序(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">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 上的插件，了解更多信息并开始使用。
🌐 Check out the plugin on GitHub to learn more and get started.
JetBrains IDEs
JetBrains IDE（例如 WebStorm、PhpStorm 等）支持在 HTML 中使用智能 Tailwind CSS 补全。
🌐 JetBrains IDEs like WebStorm, PhpStorm, and others include support for intelligent Tailwind CSS completions in your HTML.