Tailwind CSS结合Next.js时进度条空Div不显示问题及自定义Height配置引发问题的原因咨询

我最近在Next.js项目里用Tailwind CSS实现进度条组件时遇到了一个头疼的问题，折腾一番终于解决了，顺便搞清楚了背后的原因，分享给大家：

问题描述 #

我想实现类似Tailwind-kit官网的进度条组件，写了如下代码：

<div>
  <div class="bg-white rounded-lg w-72 shadow block p-4 m-auto">
    <div class="w-full h-2 bg-gray-400 rounded-full mt-3">
      <div class="w-3/4 h-full text-center text-xs text-white bg-green-500 rounded-full">
      </div>
    </div>
  </div>
</div>

但在Chrome和Safari浏览器中查看时，进度条完全不显示，检查元素发现对应的div高度为0。

临时解决方法 #

后来我尝试移除了tailwind.config.js中自定义的height配置，问题就立刻解决了。原来的配置代码如下：

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    // 移除了这行自定义配置后问题解决
    // height: { main: '681px' },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

深层原因分析 #

这背后的核心逻辑是Tailwind CSS的主题配置规则：直接在theme对象下定义属性会覆盖默认工具类，而非扩展。

当你在theme对象下直接写height: { main: '681px' }时，Tailwind会用这个自定义配置完全替换掉默认的height工具类集合——也就是说，原本预设的h-2、h-full这些类根本不会被生成对应的CSS规则。没有了h-2和h-full的高度定义，进度条的div自然就没有高度，显示为0。

如果想要添加自定义height类同时保留默认工具类，正确的做法是把自定义配置放在theme.extend中，示例如下：

module.exports = {
  // ...其他配置
  theme: {
    extend: {
      height: {
        main: '681px',
      },
    },
  },
  // ...其他配置
}

这样Tailwind会在默认height类的基础上，追加你自定义的h-main类，不会影响原有h-2、h-full等类的正常生效。

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