React中无法动态设置Section高度？Tailwind CSS问题排查

核心原因 #

你遇到的问题本质是Tailwind CSS对动态生成的类名不支持默认编译。Tailwind会在构建阶段扫描代码中静态存在的类名并生成对应的CSS，而你用字符串拼接出来的min-h-['+ availableHeight +'px]属于动态类名，Tailwind无法提前识别，因此不会生成对应的样式规则，导致section的高度设置不生效。

另外，你当前的availableHeight只在组件初始化时获取一次，窗口大小变化时不会更新，也不符合“当前屏幕可用高度”的需求。

解决方案 #

方案1：使用内联样式（最可靠）

直接通过React的内联样式设置高度，绕开Tailwind的静态编译限制：

<section 
  id='homeRootSection' 
  className='grid bg-slate-800'
  style={{ minHeight: `${availableHeight}px` }}
>
  <article id='homeGridArticleLeft'>
    <p>article 1</p>
  </article>
  <article id='homeGridArticleRight'>
    <p>article 2</p>
  </article>
  <article className='min-w-screen h-16 text-white relative bottom-0 left-0 right-0'>
    <p>Footer</p>
  </article>
</section>

方案2：修复Tailwind动态类名写法（需开启JIT）

如果坚持用Tailwind类名，确保项目使用Tailwind v3（默认开启JIT模式），并改用模板字符串拼接类名（让Tailwind能识别动态值的格式）：

<section 
  id='homeRootSection' 
  className={`grid min-h-[${availableHeight}px] bg-slate-800`}
>
  {/* 子元素内容不变 */}
</section>

不过这种方式仍有局限：如果availableHeight是完全动态的（比如窗口resize后变化），Tailwind可能无法覆盖所有可能的数值，还是内联样式更灵活。

补充：监听窗口大小变化

为了实现“高度始终等于当前屏幕可用高度”，需要监听窗口resize事件，实时更新availableHeight：

import { useState, useEffect } from 'react';

// ...

const [availableHeight, setAvailableHeight] = useState(window.innerHeight);

useEffect(() => {
  const handleResize = () => {
    setAvailableHeight(window.innerHeight);
  };
  window.addEventListener('resize', handleResize);
  // 组件卸载时移除监听
  return () => window.removeEventListener('resize', handleResize);
}, []);

// 验证高度的useEffect改为监听availableHeight变化
useEffect(() => {
  const section = document.getElementById('homeRootSection');
  if (section) {
    console.log('available height : ', availableHeight);
    console.log('Section Height: ', section.clientHeight);
  }
}, [availableHeight]); // 依赖availableHeight，更新时重新打印

额外注意点 #

你的footer使用了relative定位，它不会从文档流中脱离，会占用section的空间。如果希望section的高度是“屏幕可用高度减去footer高度”，可以调整availableHeight的计算：

const [availableHeight, setAvailableHeight] = useState(
  window.innerHeight - 64 // h-16对应64px
);

// resize时也重新计算
const handleResize = () => {
  setAvailableHeight(window.innerHeight - 64);
};

内容的提问来源于stack exchange，提问作者Anirudhdhsinh Jadeja