Tailwind CSS
JetBrains Rider 集成了 Tailwind CSS ，提供 Tailwind CSS 语法支持 、Tailwind CSS 类名的补全、CSS 函数和指令的补全、悬停时预览生成的 CSS，以及 Tailwind CSS 特定的检查功能。
JetBrains Rider 中的 Tailwind CSS 支持由 Tailwind CSS 语言服务器 提供支持，该服务器会检测 Tailwind CSS 包，并根据包的版本搜索 Tailwind CSS 特定的项目配置：
对于 Tailwind CSS 4，语言服务器会查找包含
@import "tailwindcss"指令的 CSS 文件。对于 Tailwind CSS 3，语言服务器会查找 tailwind.config.js 文件。
JetBrains Rider 附带了一个捆绑的 Tailwind CSS 语言服务器。 然而，建议您通过下载最新的服务器版本并在 页面中指定路径（如 配置 Tailwind CSS 语言服务器 中所述）来保持语言服务器的最新状态。
在开始之前
请确保您的计算机上安装了 Node.js。 按照 配置本地 Node.js 解释器、 在 Windows Subsystem for 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 。
在 ASP.NET 或 Blazor 项目中设置 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 语言服务器
JetBrains Rider 中的 Tailwind CSS 支持由 Tailwind CSS 语言服务器 提供支持，该服务器会检测 Tailwind CSS 包，并根据包的版本搜索 Tailwind CSS 特定的项目配置：
对于 Tailwind CSS 4，语言服务器会查找包含
@import "tailwindcss"指令的 CSS 文件。对于 Tailwind CSS 3，语言服务器会查找 tailwind.config.js 文件。
JetBrains Rider 附带了一个捆绑的 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 类上时，JetBrains Rider 会显示一个 文档 弹出窗口，预览生成的 CSS。 要在工具窗口中查看预览，请点击 
并选择 在文档工具窗口中显示。
您完成代码时，预览也会显示在 文档 弹窗 Ctrl+Q 中。
在 .slim、.haml 和其他文件中的 Tailwind CSS 支持
JetBrains Rider 可以在其他文件类型中提供 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 文件并重启服务器。逐步删除注释，保存文件并重启服务器，直到找到问题所在的片段。
- Tailwind CSS 语言服务器未启动
当发生此类错误时，状态栏中的 语言服务 小部件和 Tailwind CSS 项目会标记为
。
此类错误通常是由于 Node.js 配置不正确引起的。 要解决这个问题：
按下 Ctrl+Alt+S 以打开设置，然后选择 。
确保您的 Node.js 解释器路径正确。
从 配置 Node.js 解释器 中了解更多信息。