如何在Tailwind CSS中为div设置固定像素宽高？

有几种简单的方式可以实现这个需求，根据你的使用场景选择即可：

1. 直接使用Tailwind的动态尺寸类 #

Tailwind支持直接通过方括号语法指定任意像素值，这是最直接的方式，适合一次性使用的场景：

<div className="w-[100px] h-[100px]">
  你的内容
</div>

2. 自定义可复用的尺寸类 #

如果这个100px的宽高需要在多个组件中重复使用，建议在Tailwind配置文件里扩展自定义类，方便统一维护：

首先修改tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"], // 确保你的React文件被包含
  theme: {
    extend: {
      width: {
        'box-100': '100px',
      },
      height: {
        'box-100': '100px',
      },
    },
  },
  plugins: [],
}

之后在React组件中直接使用自定义类：

<div className="w-box-100 h-box-100">
  你的内容
</div>

3. 备选：内联样式（不推荐但可用） #

如果你临时需要快速设置，也可以直接用React的内联样式，但这会脱离Tailwind的样式体系，不建议频繁使用：

<div style={{ width: '100px', height: '100px' }}>
  你的内容
</div>

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