自定义高度h-96在tailwind.config.js中配置后不生效如何解决？

常见排查及解决步骤 #

1. 确认tailwind.config.js配置结构正确 #

自定义高度必须放在theme.extend.height节点下，位置错误会导致配置不生效。正确写法示例：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // 按需调整路径，确保所有用到Tailwind的文件都被包含
  ],
  theme: {
    extend: {
      height: {
        '96': '24rem', // 带不带引号都合法，两种写法均有效
      },
    },
  },
  plugins: [],
}

2. 重启Next.js开发服务器 #

Tailwind仅在启动时扫描配置和内容文件生成样式，修改配置后必须重启npm run dev/yarn dev，否则新定义的类不会被注入到最终CSS中。

3. 检查组件类名拼写 #

确认组件中使用的是h-96，没有拼写错误（比如误写为h96、h_96或height-96）。正确使用示例：

<div className="h-96 bg-gray-200">
  测试自定义高度容器
</div>

4. 验证content配置覆盖范围 #

如果组件文件不在content数组指定的路径内，Tailwind会判定该类未被使用，不会将其打包进最终CSS。根据项目结构调整路径，比如存在src目录时，修改为：

content: [
  "./src/**/*.{js,ts,jsx,tsx,mdx}",
],

5. 排查样式冲突 #

打开浏览器开发者工具，查看元素样式面板，确认h-96对应的height: 24rem是否被其他CSS规则（如内联样式、自定义CSS类、第三方框架样式）覆盖。若存在冲突，可临时使用!h-96强制应用该样式进行排查（不建议长期滥用）：

<div className="!h-96 bg-gray-200">
  强制应用自定义高度
</div>

内容的提问来源于stack exchange，提问作者Víctor Manuel Nevárez Herrera