TailwindCSS h-[calc(100vh_-_44px)]任意值工具类计算样式不生效

使用如下两种类名写法时，h-[calc(100vh-44px)]对应的样式规则不会被TailwindCSS编译生成，元素高度不符合预期：

<p class="h-[calc(100vh_-_44px)] sm:h-fit">...</p>
<p class="h-[calc(100vh-44px)] sm:h-fit">...</p>

• h-[calc(100vh-44px)]写法本身不符合Tailwind任意值解析规则：Tailwind会将类名中无空格分隔的-识别为「属性名-值」的连接符，会把calc(100vh-44px)里的减号误判为类名分段标记，最终无法识别出这是合法的高度值。
• 如果h-[calc(100vh_-_44px)]也不生效，和语法无关，属于配置或缓存问题：Tailwind规定任意值里的空格用_代替，这个写法本身是符合官方语法要求的。

1. 类名统一使用标准语法写法：

<p class="h-[calc(100vh_-_44px)] sm:h-fit">...</p>

2. 若上述写法仍不生效，按顺序排查：
   • 确认本地TailwindCSS版本≥3.0，任意值语法是Tailwind V3的新增特性，V2及以下版本不支持该写法
   • 检查tailwind.config.js中的content配置项，确保写该类名的文件路径已经被加入扫描范围，未被扫描到的类名不会被编译产出
   • 清除项目构建缓存（比如删除.next、dist、node_modules/.vite等缓存目录），重启构建服务重新编译
   • 若使用CDN方式引入Tailwind，确认引入的是V3版本的CDN资源，未开启Safelist过滤拦截自定义任意值类名

内容的提问来源于stack exchange，提问作者The code painter