在Tailwind CSS中设置自定义最大/最小高度或宽度的问题

首先看你提供的代码，里面并没有实际添加min-h-10或max-h-10类，先确认你是要给哪个元素设置最小/最大高度。

正确使用方式 #

直接在目标元素上添加对应的Tailwind类即可，比如修改你的代码：

<div class="flex-col justify-center">
    <!-- 设置最小高度为2.5rem（对应h-10的尺寸） -->
    <div class="min-h-10 w-10 border bg-blue-300 block">
        h
    </div>
</div>

如果需要同时限制最大高度：

<div class="flex-col justify-center">
    <div class="min-h-10 max-h-10 w-10 border bg-blue-300 block">
        h
    </div>
</div>

常见问题排查 #

• 版本检查：确保你使用的Tailwind CSS版本支持这些类（v2及以上版本都默认包含基础的min-h/max-h工具类，v1版本也有相关支持）。
• 主题配置冲突：如果你的tailwind.config.js自定义了height主题，可能覆盖了默认的10尺寸值。检查配置文件，确保保留了默认高度值，或者明确定义：

  module.exports = {
    theme: {
      extend: {
        height: {
          '10': '2.5rem',
        },
      },
    },
  }
  

• 样式覆盖问题：打开浏览器开发者工具，查看目标元素的样式面板，确认min-height/max-height属性是否被其他CSS规则覆盖（比如优先级更高的类、内联样式或者全局CSS）。

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