# Tailwind CSS > For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt). > **TL;DR** > 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。 > > > > 所需插件： > > > > `CSS`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。 > > > > `Tailwind CSS`  -  在 设置 | 插件 页面上安装插件。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。 IntelliJ IDEA 集成了 [Tailwind CSS](https://tailwindcss.com)，提供 [TailwindCSS 语法支持](https://tailwindcss.com/docs/editor-setup)、Tailwind CSS 类名的补全、CSS 函数和指令的补全、悬停时预览生成的 CSS，以及 Tailwind CSS 特定的检查功能。 IntelliJ IDEA 中的 Tailwind CSS 支持由 [Tailwind CSS 语言服务器](https://www.npmjs.com/package/@tailwindcss/language-server) 提供支持，该服务器会检测 Tailwind CSS 软件包，并根据软件包的版本搜索 Tailwind CSS 特定的项目配置： * 使用 Tailwind CSS 4 时，语言服务器会查找带有 `@import "tailwindcss"` 指令的 CSS 文件。 * 使用 Tailwind CSS 3 时，语言服务器会查找 `tailwind.config.js` 文件。 IntelliJ IDEA 随附捆绑的 Tailwind CSS 语言服务器。 但是，建议下载最新服务器版本，并在 `设置 | 语言与框架 | 样式表 | Tailwind CSS` 页面上指定其路径，如 [配置 Tailwind CSS 语言服务器](#ws_tailwind_configure_language_server) 中所述，以使语言服务器保持最新。 ## 开始之前 Procedure: 1. 请确保您的计算机上安装了 [Node.js](http://nodejs.org/)。 请按照 [配置本地 Node.js 解释器](developing-node-js-applications.html#ws_node_configure_local_node_interpreter)、 [在 Windows Subsystem for Linux 上使用 Node.js](developing-node-js-applications.html#ws_node_wsl) 或 [配置远程 Node.js 运行时](configuring-remote-node-interpreters.html) 中所述，在项目中配置 Node.js 运行时。 2. 请确保在设置中已启用捆绑的 CSS 插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择 `插件` 。 在搜索字段中，输入 CSS 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。 3. 安装并启用 Tailwind CSS 插件（在 设置 | 插件 页面上），如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo) 中所述。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。 4. 确保 `tailwindcss` 软件包已在 `package.json` 中列为依赖项，并且项目已通过 CSS 文件中的 `@import "tailwindcss"` 指令（TailwindCSS 4）或 `tailwind.config.js` (TailwindCSS 3) 文件正确配置。 或者，按照 [如下所述](#ws_css_tailwind_install_configure) 安装并配置 Tailwind CSS。 ## 安装并配置 Tailwind CSS 在 [Tailwind CSS 官方网站](https://tailwindcss.com/docs/installatione) 上查找详细说明。 Procedure: 1. 打开你的命令行 shell 或嵌入式 终端 （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))），然后输入： ```SHELL npm install -D tailwindcss ``` 2. 打开要使用 Tailwind CSS 的 CSS 文件，并向其中添加以下 `import` 语句： ```CSS @import "tailwindcss"; ``` 3. 重启 Tailwind CSS 语言服务器。 为此，请点击状态栏上的 语言服务 微件 (图标为 ![语言服务微件](https://resources.jetbrains.com/help/img/idea/2026.3/icon_tailwind_ls_server_status_bar.png) 或 ![语言服务微件](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.json.object.svg))，然后点击 ![重新启动服务图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.stopAndRestart.svg)，位于 Tailwind CSS 旁边。 ![重新启动 Tailwind CSS 服务器](https://resources.jetbrains.com/help/img/idea/2026.3/styles.css" rel="stylesheet">` ### 配置 Tailwind CSS 语言服务器 IntelliJ IDEA 中的 Tailwind CSS 支持由 [Tailwind CSS 语言服务器](https://www.npmjs.com/package/@tailwindcss/language-server) 提供支持，该服务器会检测 Tailwind CSS 软件包，并根据软件包的版本搜索 Tailwind CSS 特定的项目配置： * 使用 Tailwind CSS 4 时，语言服务器会查找带有 `@import "tailwindcss"` 指令的 CSS 文件。 * 使用 Tailwind CSS 3 时，语言服务器会查找 `tailwind.config.js` 文件。 IntelliJ IDEA 随附捆绑的 Tailwind CSS 语言服务器。 但是，建议保持语言服务器为最新版本。 您还可以自定义 Tailwind CSS 的默认 [配置选项](#ws_css_tailwind_configuration_customize_options)。 Procedure: 1. 全局安装最新版本的 [@tailwindcss/language-server 包](https://www.npmjs.com/package/@tailwindcss/language-server)。 为此，请打开命令行 shell 或嵌入的 终端 （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）并输入： ```SHELL npm install -g @tailwindcss/language-server ``` 2. 打开 设置 对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），然后转到 `设置 | 语言与框架 | 样式表 | Tailwind CSS` 。 3. 在 语言服务器 字段中，指定 `@tailwindcss/language -server` 软件包的路径。 4. 可选：自定义 Tailwind CSS 的默认 [配置选项](https://github.com/tailwindlabs/tailwindcss-intellisense#extension-settings)。 例如，您可能希望调整 [HTML 属性](https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes) 列表，以提供类完成项或使用实验性的 [正则表达式格式](https://github.com/tailwindlabs/tailwindcss/issues/7553#issuecomment-735915659) 来指定应该触发完成项的其他位置。 在 配置 区域中，更新属性以添加配置选项。 ## 补全 Tailwind CSS 类 Tailwind CSS 语言服务器在各种上下文中为 Tailwind CSS 类提供自动补全，例如，在 HTML 中以及 CSS 文件中 `@apply` 指令之后、JavaScript 字符串文字中等。 在补全列表中，来自语言服务器的建议以 ![Tailwind CSS 图标](https://resources.jetbrains.com/help/img/idea/2026.3/icon_tailwind.png) 标记，而 ![类图标](https://resources.jetbrains.com/help/img/idea/2026.3/icon_completion_list_class.png) 表示来自项目中已使用类的建议。 ![补全列表 — 来自服务器和项目的建议](https://resources.jetbrains.com/help/img/idea/2026.3/ws_tailwind_completion_tw_classes_and_used_classes.png) ### 预览结果 CSS 将鼠标悬停在 HTML 或 CSS 文件中的 Tailwind CSS 类上时，IntelliJ IDEA 会显示一个 文档 弹出窗口，其中包含生成的 CSS 预览。 要在工具窗口中查看预览，请点击 ![更多图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.general.moreVertical.svg)并选择 在文档工具窗口中显示 。 ![CSS 预览](https://resources.jetbrains.com/help/img/idea/2026.3/ws_tailwind_css_preview.png) 您完成代码时，预览也会显示在 文档 弹窗 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))中。 ![预览完成代码时生成的 CSS](https://resources.jetbrains.com/help/img/idea/2026.3/ws_tailwind_css_preview_completion.png) ### .slim、.haml 和其他文件中的 Tailwind CSS 支持 IntelliJ IDEA 可以在其他文件类型中为 Tailwind CSS 类提供补全，例如在 `.slim` 、 `.haml` 、 `.jte` 、 `.kte` 等中。 Procedure: 1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择 `语言与框架 | 样式表 | Tailwind CSS` 。 2. 在 `includeLanguages` 属性中，添加希望获得 Tailwind CSS 类补全的上下文。 请使用以下格式： * `"slim": "slim"` * `"haml": "haml"` * `"jte": "html"` * `"kte": "html"` 3. 要在 Slim 模板和 `.haml` 文件中启用 Tailwind CSS 类补全，请将 `emmetCompletions` 属性设置为 `true` 。 ![添加自定义上下文用于代码补全](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_tailwind_custom_contexts_settings.png) ## 故障排除 如果不再获得 Tailwind CSS 特定的编码辅助，可能是由于以下原因之一： Tailwind CSS 语言服务器已过时 : 按照 [上述说明](#ws_tailwind_configure_language_server) 安装最新版本的 Tailwind CSS 语言服务器。 带有 @import 'tailwindcss' 的 CSS 文件已损坏 : > **Note:** : > 对于使用 Tailwind CSS 版本 4 及更高版本的项目。 : : : : 如果带有 @import 'tailwindcss' 的 CSS 文件已损坏，可能会破坏服务器初始化。 在这种情况下，错误指示器 ![错误图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.testError.svg) 会显示在状态栏上，也会显示在 Tailwind CSS 项旁边。 : : : : ![状态栏上显示错误指示器](https://resources.jetbrains.com/help/img/idea/2026.3/tailwind_css_troubleshooting_list_css_file_corrupted.png) : : 要修复此问题： : : : : 1. : : 尝试注释掉除 `@import "tailwindcss"` 之外的所有内容，保存 CSS 文件，然后重启服务器。 : : : : 2. : : 按步进方式移除注释、保存文件并重启服务器，直到找到出现问题的片段。 : : : : > **Note:** : > 要重启服务器，请使用状态栏中的 语言服务 小部件， [如上所述](#ws_css_tailwind_restart_server)。 Tailwind CSS 语言服务器未启动 : 发生此类错误时，状态栏中的 语言服务 微件和 Tailwind CSS 项会用 ![错误图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.testError.svg) 标记。 : : : : ![Tailwind CSS 语言服务器错误](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_tailwind_server_error.png) : : 通常，此类错误是由不正确的 Node.js 配置引起的。 要解决这个问题： : : : : 1. : : 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择 `语言&框架 | JavaScript 运行时` 。 : : : : 2. : : 请确保在 Node.js 字段中选择了 首选运行时 。 : : : : 3. : : 请确保您的 Node.js 运行时的路径正确。 : : : : : : 详细了解请参见 [配置 Node.js 解释器](developing-node-js-applications.html#ws_node_configure_local_node_interpreter)。