TailwindCSS任意值calc中如何引用自定义主题配置值

min-h-[calc(100vh - h-navHeight)]不生效，是因为Tailwind方括号任意值语法不会自动把你在theme.extend里配置的height键名转换成可识别的CSS值，h-navHeight本身不是合法CSS属性值，浏览器会直接忽略这条样式规则。

方案1：任意值内直接用theme()函数引用主题值（无需改原有配置） #

Tailwind原生支持在任意值中通过theme()函数读取配置好的主题值，注意calc表达式里的空格必须用下划线_替代（否则类名会被空格截断失效）。
修改后的代码如下：

<div
  className='min-h-[calc(100vh_-_theme('height.navHeight'))] grid place-items-center after:absolute 
after:h-[calc(100vh_-_theme('height.navHeight'))] after:w-full after:top-0 after:bg-[rgba(0,0,0,0.5)] '
>
  <iframe
    className='z-10 max-w-full'
    width='1120'
    height='630'
    src={`https://www.youtube.com/embed/${id}`}
    title='YouTube video player'
    frameBorder='0'
    allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;fullscreen;'
  ></iframe>
</div>

这种方式完全不需要改动现有Tailwind配置，改完直接生效，是成本最低的修复方案。

方案2：结合CSS自定义属性（适合需要动态修改高度的场景） #

如果后续导航高度可能动态变化（比如滚动时导航收缩、多端导航高度不一致），可以把导航高度定义为全局CSS变量，再在Tailwind配置和calc表达式里统一引用：

1. 先在全局CSS文件中定义变量：

:root {
  --nav-height: 12vh;
}

2. 修改Tailwind配置引用该变量：

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      height: {
        navHeight: "var(--nav-height)",
      },
    },
  },
  plugins: [],
};

3. 任意值calc里直接引用CSS变量即可，同样注意空格用下划线替代：

<div
  className='min-h-[calc(100vh_-_var(--nav-height))] grid place-items-center after:absolute 
after:h-[calc(100vh_-_var(--nav-height))] after:w-full after:top-0 after:bg-[rgba(0,0,0,0.5)] '
>
  {/* iframe内容保持不变 */}
</div>

这种方案的优势是可以随时通过CSS媒体查询或者JS修改--nav-height变量的值，所有用到导航高度的位置会自动同步更新，不需要重复维护多份硬编码数值。

• 所有写在Tailwind方括号任意值里的CSS表达式，空格必须替换为下划线_，否则Tailwind会把空格识别为类名分隔符，导致样式解析失败。
• 用theme()引用主题值的时候，路径要和配置的层级对应，比如配置在theme.extend.height.navHeight，对应的引用路径就是height.navHeight，不要写错层级。

内容的提问来源于stack exchange，提问作者Reuben B