Tailwind CSS
PyCharm 与 Tailwind CSS 集成，提供 Tailwind CSS 语法支持 、Tailwind CSS 类名补全、CSS 函数和指令的补全、悬停时预览生成的 CSS，以及特定于 Tailwind CSS 的检查。
PyCharm 中的 Tailwind CSS 支持由 Tailwind CSS 语言服务器 提供。该服务器会检测 Tailwind CSS 包，并根据包的版本查找特定于 Tailwind CSS 的项目配置：
对于 Tailwind CSS 4，语言服务器会查找包含
@import "tailwindcss"指令的 CSS 文件。对于 Tailwind CSS 3，语言服务器会查找 tailwind.config.js 文件。
PyCharm 随附捆绑的 Tailwind CSS 语言服务器。 不过，建议通过下载最新的服务器版本并在 页面上指定其路径来保持语言服务器为最新，如 配置 Tailwind CSS 语言服务器 中所述。
开始之前
请确保您的计算机上已安装 Node.js。 按照 配置本地 Node.js 解释器、 在 Windows Subsystem for Linux 上使用 Node.js 或 配置远程 Node.js 运行时 中的说明，在项目中配置 Node.js 运行时。
请确保按照 管理插件 中的说明，在 设置 | 插件 页面的 已安装 选项卡中启用了 CSS 和 Tailwind CSS 捆绑插件。
请确保在您的 package.json 中将
tailwindcss包列为依赖项，并且项目已正确配置：在 CSS 文件中通过@import "tailwindcss"指令（TailwindCSS 4），或在 tailwind.config.js 文件中（TailwindCSS 3）。或者，按照 如下所述 安装并配置 Tailwind CSS。
安装并配置 Tailwind CSS
在 Tailwind CSS 官方网站 上查找详细说明。
打开内置 终端 （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">
配置 Tailwind CSS 语言服务器
PyCharm 中的 Tailwind CSS 支持由 Tailwind CSS 语言服务器 提供。该服务器会检测 Tailwind CSS 包，并根据包的版本查找特定于 Tailwind CSS 的项目配置：
对于 Tailwind CSS 4，语言服务器会查找包含
@import "tailwindcss"指令的 CSS 文件。对于 Tailwind CSS 3，语言服务器会查找 tailwind.config.js 文件。
PyCharm 随附捆绑的 Tailwind CSS 语言服务器。 不过，建议保持语言服务器为最新。
您还可以自定义 Tailwind CSS 的默认 配置选项。
全局安装最新版本的 @tailwindcss/language-server 包。 为此，打开内置 终端 （Alt+F12 ），并输入：
npm install -g @tailwindcss/language-server打开 设置 对话框（Ctrl+Alt+S ），并转到 。
在 语言服务器 字段中，指定
@tailwindcss/language -server包的路径。可选地，自定义 Tailwind CSS 的默认 配置选项。 例如，您可能希望调整用于提供类补全的 HTML 属性列表，或使用实验性的 正则表达式格式 来指定应触发补全的其他位置。
在 配置 区域，更新属性以添加配置选项。
补全 Tailwind CSS 类
Tailwind CSS 语言服务器在多个上下文中为 Tailwind CSS 类提供自动补全，例如在 HTML 中、在 CSS 文件中 @apply 指令之后、在 JavaScript 字符串字面量中等。 在补全列表中，来自语言服务器的建议标记为 
，而 
表示来自项目中已使用类的建议。
预览生成的 CSS
当您在 HTML 或 CSS 文件中将鼠标悬停在 Tailwind CSS 类上时，PyCharm 会显示 文档 弹出窗口，预览生成的 CSS。 要在工具窗口中查看预览，请点击 
并选择 在文档工具窗口中显示。
在进行代码补全时，预览也会显示在 文档 弹出窗口（Ctrl+Q ）中。
在 .slim、.haml 及其他文件中的 Tailwind CSS 支持
PyCharm 还可以在其他文件类型中为 Tailwind CSS 类提供补全，例如在 .slim 、 .haml 、 .jte 、 .kte 等文件中。
按 Ctrl+Alt+S 打开设置，然后选择 。
在
includeLanguages属性中，添加您希望为 Tailwind CSS 类提供补全的上下文。 使用以下格式："slim": "slim""haml": "haml""jte": "html""kte": "html"
要在 Slim 模板和 .haml 文件中启用 Tailwind CSS 类补全，请将
emmetCompletions属性设置为true。
故障排除
如果您不再获得特定于 Tailwind CSS 的编码辅助，可能是由以下原因之一导致：
- Tailwind CSS 语言服务器已过时
按 如上所述 安装最新版本的 Tailwind CSS 语言服务器。
- 包含 @import 'tailwindcss' 的 CSS 文件已损坏
如果包含 @import 'tailwindcss' 的 CSS 文件已损坏，可能会导致服务器初始化失败。
要解决该问题：
尝试将除
@import "tailwindcss"之外的所有内容注释掉，保存该 CSS 文件，然后重启服务器。逐步去除注释、保存文件并重启服务器，直到定位到问题所在的片段。
- Tailwind CSS 语言服务器无法启动
发生此类错误时，状态栏中的 语言服务 小部件和 Tailwind CSS 项会标记为
。
大多数情况下，此类错误是由不正确的 Node.js 配置引起的。 要解决该问题：
按 Ctrl+Alt+S 打开设置，然后选择 。
请确保在 首选运行时 字段中选择了 Node.js。
请确保您的 Node.js 运行时路径正确。
在 配置 Node.js 解释器 中了解详细信息。