Tailwind CSS

IntelliJ IDEA 集成了 Tailwind CSS ，提供 TailwindCSS 语法支持、Tailwind CSS 类名的补全、CSS 函数和指令的补全、悬停时预览生成的 CSS，以及 Tailwind CSS 特定的检查功能。

IntelliJ IDEA 中的 Tailwind CSS 支持由 Tailwind CSS 语言服务器提供支持，该服务器会检测 Tailwind CSS 软件包，并根据软件包的版本搜索 Tailwind CSS 特定的项目配置：

IntelliJ IDEA 随附捆绑的 Tailwind CSS 语言服务器。但是，建议下载最新服务器版本，并在设置 | 语言与框架 | 样式表 | Tailwind CSS 页面上指定其路径，如配置 Tailwind CSS 语言服务器中所述，以使语言服务器保持最新。

开始之前

请确保您的计算机上安装了 Node.js。请按照配置本地 Node.js 解释器、在 Windows Subsystem for Linux 上使用 Node.js 或配置远程 Node.js 运行时中所述，在项目中配置 Node.js 运行时。
请确保在设置中已启用捆绑的 CSS 插件。按 Ctrl+Alt+S 打开设置，然后选择插件。在搜索字段中，输入 CSS。有关插件的更多信息，请参阅管理插件。
安装并启用 Tailwind CSS 插件（在设置 | 插件页面上），如从 JetBrains Marketplace 安装插件中所述。该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。
确保 tailwindcss 软件包已在 package.json 中列为依赖项，并且项目已通过 CSS 文件中的 @import "tailwindcss" 指令（TailwindCSS 4）或 tailwind.config.js (TailwindCSS 3) 文件正确配置。
或者，按照如下所述安装并配置 Tailwind CSS。

在 Tailwind CSS 官方网站上查找详细说明。

打开你的命令行 shell 或嵌入式终端（Alt+F12 ），然后输入：
npm install -D tailwindcss
打开要使用 Tailwind CSS 的 CSS 文件，并向其中添加以下 import 语句：
@import "tailwindcss";
重启 Tailwind CSS 语言服务器。为此，请点击状态栏上的语言服务微件 (图标为或 )，然后点击，位于 Tailwind CSS 旁边。
打开您的 HTML 文件，并在 <head></head> 标签下添加指向 CSS 文件的链接，例如， <link href="/src/styles.css" rel="stylesheet">

IntelliJ IDEA 随附捆绑的 Tailwind CSS 语言服务器。但是，建议保持语言服务器为最新版本。

您还可以自定义 Tailwind CSS 的默认配置选项。

全局安装最新版本的 @tailwindcss/language-server 包。为此，请打开命令行 shell 或嵌入的终端（Alt+F12 ）并输入：
npm install -g @tailwindcss/language-server
打开设置对话框（Ctrl+Alt+S ），然后转到设置 | 语言与框架 | 样式表 | Tailwind CSS。
在语言服务器字段中，指定 @tailwindcss/language -server 软件包的路径。
可选：自定义 Tailwind CSS 的默认配置选项。例如，您可能希望调整 HTML 属性列表，以提供类完成项或使用实验性的正则表达式格式来指定应该触发完成项的其他位置。
在配置区域中，更新属性以添加配置选项。

Tailwind CSS 语言服务器在各种上下文中为 Tailwind CSS 类提供自动补全，例如，在 HTML 中以及 CSS 文件中 @apply 指令之后、JavaScript 字符串文字中等。在补全列表中，来自语言服务器的建议以标记，而表示来自项目中已使用类的建议。

将鼠标悬停在 HTML 或 CSS 文件中的 Tailwind CSS 类上时，IntelliJ IDEA 会显示一个文档弹出窗口，其中包含生成的 CSS 预览。要在工具窗口中查看预览，请点击并选择在文档工具窗口中显示。

您完成代码时，预览也会显示在文档弹窗 Ctrl+Q 中。

IntelliJ IDEA 可以在其他文件类型中为 Tailwind CSS 类提供补全，例如在 .slim 、 .haml 、 .jte 、 .kte 等中。

按 Ctrl+Alt+S 打开设置，然后选择语言与框架 | 样式表 | Tailwind CSS。
在 includeLanguages 属性中，添加希望获得 Tailwind CSS 类补全的上下文。请使用以下格式：
- "slim": "slim"
- "haml": "haml"
- "jte": "html"
- "kte": "html"
要在 Slim 模板和 .haml 文件中启用 Tailwind CSS 类补全，请将 emmetCompletions 属性设置为 true。