在Rider的 Blazor Server（.NET 10）项目中，Tailwind CSS IntelliSense无法工作

前端开发 2026-07-11

我在一个目标为.NET 10的 Blazor Server项目中工作，并尝试使用Tailwind CSS。

我在 App.razor 的 <head> 部分加入了Tailwind CDN脚本，运行时一切正常——Tailwind的类按预期应用。

然而，在我的.razor或 .html文件中，我没有任何Tailwind类的自动完成或IntelliSense。

我正在使用Rider 2025.3.3，Tailwind CSS插件已安装并启用。插件设置看起来已配置好（见下方截图），但IntelliSense仍然不起作用。

我还尝试通过npm安装Tailwind CSS Language Server，命令为 npm install @tailwindcss/language-server，并在插件设置中手动指定其路径，但也不起作用。

语言服务器：@tailwindcss/language-server (Default)
Tailwind CSS插件设置：

{
  "inspectPort": null,
  "emmetCompletions": false,
  "classAttributes": ["class", "className", "ngClass", "class:list"],
  "classFunctions": [],
  "codeActions": true,
  "codeLens": true,
  "hovers": true,
  "suggestions": true,
  "validate": true,
  "colorDecorators": true,
  "rootFontSize": 16,
  "lint": {
    "cssConflict": "warning",
    "invalidApply": "error",
    "invalidScreen": "error",
    "invalidVariant": "error",
    "invalidConfigPath": "error",
    "invalidTailwindDirective": "error",
    "invalidSourceDirective": "error",
    "recommendedVariantOrder": "warning",
    "usedBlocklistedClass": "warning"
  },
  "showPixelEquivalents": true,
  "includeLanguages": {
    "ftl": "html",
    "jinja": "html",
    "jinja2": "html",
    "smarty": "html",
    "tmpl": "gohtml",
    "cshtml": "html",
    "vbhtml": "html",
    "razor": "html"
  },
  "files": {
    "exclude": [
      "**/.git/**",
      "**/.hg/**",
      "**/.svn/**",
      "**/node_modules/**",
      "**/.yarn/**",
      "**/.venv/**",
      "**/venv/**",
      "**/.next/**",
      "**/.parcel-cache/**",
      "**/.svelte-kit/**",
      "**/.turbo/**",
      "**/__pycache__/**"
    ]
  },
  "experimental": {
    "configFile": null,
    "classRegex": []
  }
}

解决方案

你使用的Tailwind版本是什么？

对于v3，需要创建一个 tailwind.config.js，如下所示：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./**/*.{razor,html,cshtml}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

对于v4，最简单的设置方式是按照 https://tailwindcss.com/docs/installation/tailwind-cli 的说明进行。关键步骤如下：

创建一个输入CSS，并插入 @import "tailwindcss";
运行类似 npx @tailwindcss/cli -i ./Styles/input.css -o ./wwwroot/output.css --watch 的命令来构建你的CSS。
然后在App.razor中添加CSS链接：
<link rel="stylesheet" href="@Assets["output.css"]"/>

此外，建议查看这篇文章以获取一般的故障排除步骤。

如果问题仍然存在，您可以联系Rider支持，或在 Rider issue tracker 提交工单，附上 一个能够重现该问题的示例项目。

Tailwind CSS