如何在Tailwind中使用h-41类而非硬编码像素实现中间高度？

当然可以不用硬编码像素值，直接通过扩展Tailwind的主题配置来实现你要的这些高度类。

Tailwind默认的高度scale里，确实只预定义了h-40（10rem）、h-44（11rem）这类整数rem的类，中间的半rem、四分之一rem步长需要手动扩展。具体步骤如下：

1. 打开项目根目录下的tailwind.config.js文件
2. 在theme.extend中添加自定义的高度值：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], // 根据你的项目结构调整路径
  theme: {
    extend: {
      height: {
        '41': '10.25rem', // 对应164px
        '42': '10.5rem',  // 对应168px
        '43': '10.75rem', // 对应172px
      },
    },
  },
  plugins: [],
}

配置完成后，重新编译Tailwind（开发模式下会自动热更新），你就可以直接在HTML中使用h-41、h-42、h-43这些类，和官方预定义的高度类用法完全一致，还能保持rem单位的一致性，比硬编码像素更易维护。

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