Using a theme value inside the calc of an arbitrary value in tailwindcss-CodePudding

This is my tailwindconfig:

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

In the code below, min-h-[calc(100vh - h-navHeight)] does not work, but min-h-[88vh] works. Is there any way to not hard-code the height?

 <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>

CodePudding user response：

To use tailwind config values in CSS use theme function provided by Tailwind. Example usage of theme in CSS:

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

So this is how your statement would look like:

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

Also if you have whitespace in arbitrary Tailwind values they won't work.