如何在ASP.NET Razor(.cshtml)中使用Tailwind CSS容器查询的@container类

云上老周

2026-7-9

在ASP.NET Razor视图中使用Tailwind容器查询的解决方法

Tailwind容器查询的@container语法和Razor的变量引用规则冲突，导致.cshtml文件里直接写class="@container"会报错，下面是几个可行的解决办法：

转义@符号：在Razor里，连续写两个@会被解析为单个@输出，所以把代码改成：
```
<div class="@@container">...</div>
```
这样Razor不会把@container识别为C#变量，最终输出的HTML里就是class="@container"，能被Tailwind正常处理。
用字符串字面量输出：通过Razor的字符串包裹方式，明确告诉编译器输出内容：
```
<div class="@("@container")">...</div>
```
外层的@触发Razor解析，内层的字符串"@container"会被直接输出。
修改Tailwind容器查询前缀：如果不想每次都转义，可以在Tailwind配置文件里自定义容器查询的前缀，避开@符号。比如在tailwind.config.js里添加：
```
module.exports = {
  // 其他配置...
  experimental: {
    containerQueries: true,
    containerQuerySyntax: '$' // 把前缀改成$
  }
}
```
之后在视图里就可以用class="$container"来定义容器，完全避开和Razor的冲突。