在tailwindcss中任意值的计算中使用主题值

Question

这是我的tailwindconfig:

module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
height: {
navHeight: "12vh",
},
},
},
plugins: [],
};

在下面的代码中，min-h-[calc(100vh - h-navHeight)]不工作，但min-h-[88vh]工作。有没有办法不硬编码高度?

<div
className='min-h-[calc(100vh - h-navHeight)] grid place-items-center after:absolute 
after:h-[calc(100vh - h-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>

Answer 1

要在CSS中使用顺风配置值，请使用顺风提供的theme函数。theme在CSS中的使用示例:

.content-area {
height: calc(100vh - theme(spacing.12));
}

这是你的声明看起来像:

h-[calc(100vh-theme(height.navHeight))]

另外，如果你在任意的顺风值中有空格，它们将不起作用。