TailwindCSS peer-*类变量替换失效问题及解决方案咨询

这是Tailwind的预期行为，原因在于Tailwind的JIT（即时编译）引擎是在项目构建阶段扫描代码中的静态类名来生成对应的CSS规则的。当你用模板字符串动态拼接类名（比如peer-checked:h-[${height}]）时，构建阶段的编译器无法识别这个动态生成的类，自然不会生成对应的CSS样式，导致运行时无法生效；而硬编码的peer-checked:h-[240px]是静态字符串，能被编译器正确识别。

下面提供几种可行的解决方法：

方法1：结合React状态与内联样式 #

通过React状态控制复选框的选中状态，再用内联样式动态设置div的高度（内联样式是运行时生效的，不受Tailwind编译机制限制）：

import * as React from "react";

export default function App() {
  const height = '240px';
  const [isChecked, setIsChecked] = React.useState(false);

  return (
    <>
      <div className="bg-blue-200 p-4">
        Menu div
        <input 
          type="checkbox" 
          className="mt-2 peer"
          checked={isChecked}
          onChange={(e) => setIsChecked(e.target.checked)}
        />

        <div 
          className="h-0 overflow-hidden transition-all duration-500 bg-white mt-2 p-2"
          style={{ height: isChecked ? height : '0' }}
        >
          这里是展开后显示的内容
        </div>
      </div>
    </>
  );
}

方法2：使用CSS变量（自定义属性） #

先通过内联样式定义CSS变量，再在Tailwind类名中引用这个变量，这样既能保留Tailwind的状态类语法，又能实现动态高度：

import * as React from "react";

export default function App() {
  const height = '240px';

  return (
    <>
      <div className="bg-blue-200 p-4">
        Menu div
        <input type="checkbox" className="mt-2 peer"/>

        <div 
          className="h-0 peer-checked:h-[var(--expanded-height)] overflow-hidden transition-all duration-500 bg-white mt-2 p-2"
          style={{ '--expanded-height': height }}
        >
          这里是展开后显示的内容
        </div>
      </div>
    </>
  );
}

方法3：提前配置自定义高度（适合固定值场景） #

如果你的高度是固定的几个选项，可以在tailwind.config.js中扩展主题配置，把高度值提前注册，这样动态引用类名也能被编译器识别：

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      height: {
        'menu-expanded': '240px',
      },
    },
  },
}

React组件

import * as React from "react";

export default function App() {
  // 这里可以用变量存储配置好的类名
  const expandedHeightClass = 'menu-expanded';

  return (
    <>
      <div className="bg-blue-200 p-4">
        Menu div
        <input type="checkbox" className="mt-2 peer"/>

        <div 
          className={`h-0 peer-checked:h-${expandedHeightClass} overflow-hidden transition-all duration-500 bg-white mt-2 p-2`}
        >
          这里是展开后显示的内容
        </div>
      </div>
    </>
  );
}

内容的提问来源于stack exchange，提问作者Mopparthy Ravindranath