tailwind css v4 不解析 calc() 运算，而是通过 jit 编译器将 [calc(...)] 作为任意值类名原样生成 css；theme() 函数仅构建时求值，不支持 js 动态拼接或非法单位运算。
Tailwind CSS v4 并不能直接在 HTML 中识别复杂的 CSS 数学运算。
这是个常见误解。Tailwind 本身（无论 v3 还是 v4）不解析、不运行、也不生成任何 calc() 表达式——它只做静态类名扫描和 CSS 规则生成。你在 HTML 中写的 <div class="w-[calc(100%-theme(spacing.4))]"> 这类写法，<strong>不是 Tailwind 解析了 calc，而是 JIT 编译器把整个字符串当做一个“任意值”类名，原样转成 CSS 自定义属性或规则</strong>。<p>真正起作用的是：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img
src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a>
<p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p>
</div>
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>JIT 模式（v3.0+ 默认启用）支持 <code>[] 语法，把括号内内容当作字面量字符串处理
calc(100% - theme(spacing.4)) 是 PostCSS 插件（如 tailwindcss/plugin 或 @tailwindcss/typography 内部机制）在构建时通过 theme() 函数提前求值，再拼进生成的 CSS 里 .w-\[calc\(100\%-1rem\)\] { width: calc(100% - 1rem); } —— 这个 calc() 是硬编码进 CSS 的，不是运行时计算所以关键点不在“v4 能识别”，而在于：
-
theme()函数只在构建时可用，不能出现在 JS 动态拼接的 class 字符串中（如className={`w-[calc(100%-${gap})]`}会失效） -
calc()内部单位必须合法：比如theme(spacing.4)返回1rem，但theme(colors.blue.500)返回#3b82f6，不能参与长度运算 - 嵌套
calc(calc(...))不被支持，JIT 不会展开多层；浏览器原生也不支持（Safari ≤15.4 直接丢弃整条声明） - v4 并未改变这一机制——它仍依赖 PostCSS + 自定义插件链，只是默认启用了更严格的类型检查和更早的错误提示
最容易被忽略的其实是：你写的 calc() 是否真的被 Tailwind 扫描到了。如果该 class 出现在 JS 模板字符串、v-if 条件块、或未被 content 配置覆盖的文件里，它根本不会进构建流程，也就不会生成对应 CSS 规则。
