Tailwind CSS

WebStorm 集成了 Tailwind CSS ，提供 Tailwind CSS 语法支持、Tailwind CSS 类名的补全、CSS 函数和指令的补全、CSS 悬停预览以及 Tailwind CSS 专属的代码检查。

WebStorm 中的 Tailwind CSS 支持由 Tailwind CSS Language Server 提供，该服务可检测 Tailwind CSS 包，并根据包的版本查找 Tailwind CSS 专属的项目配置：

对于 Tailwind CSS 4，Language Server 会查找包含 @import "tailwindcss" 指令的 CSS 文件。
对于 Tailwind CSS 3，Language Server 会查找 tailwind.config.js 文件。

WebStorm 附带集成了 Tailwind CSS Language Server。但是，建议通过下载最新服务器版本并在设置 | 语言与框架 | 样式表 | Tailwind CSS 页面上指定其路径来保持 Language Server 为最新版本，操作方式详见配置 Tailwind CSS 语言服务器。

开始之前

请确保您的计算机上已安装 Node.js。按照配置本地 Node.js 解释器、在 Windows 子系统 Linux 上使用 Node.js 或配置远程 Node.js 解释器中的说明，在项目中配置 Node.js 解释器。
请确保在已安装选项卡的设置 | 插件页面中启用了 CSS 和 Tailwind CSS 两个捆绑插件，操作方式详见管理插件。
请确保 tailwindcss 包已作为依赖项列在您的 package.json 文件中，并且项目已正确配置，在 CSS 文件中使用 @import "tailwindcss" 指令（TailwindCSS 4），或在 tailwind.config.js 文件中使用（TailwindCSS 3）。
或者，按照以下说明安装并配置 Tailwind CSS as described below。

安装并配置 Tailwind CSS

请参阅 Tailwind CSS 官方网站获取详细安装说明。

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

配置 Tailwind CSS 语言服务器

WebStorm 中的 Tailwind CSS 支持由 Tailwind CSS Language Server 提供，该服务会检测 Tailwind CSS 包，并根据包的版本查找 Tailwind CSS 专属的项目配置：

对于 Tailwind CSS 4，Language Server 会查找包含 @import "tailwindcss" 指令的 CSS 文件。
对于 Tailwind CSS 3，Language Server 会查找 tailwind.config.js 文件。

WebStorm 附带集成了 Tailwind CSS Language Server。但是，建议保持 Language Server 为最新版本。

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

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

补全 Tailwind CSS class

Tailwind CSS Language Server 可在多个上下文中提供 Tailwind CSS 类的自动补全，例如在 HTML 中、在 CSS 文件中 @apply 指令后、在 JavaScript 字符串字面量中等。在补全列表中，来自 Language Server 的建议项标有，而表示当前项目中已使用的类的建议项。

预览生成结果 CSS

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

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

在 .slim、.haml 和其他文件中支持 Tailwind CSS

WebStorm 还可以在其他文件类型中提供 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。