React+Tailwind中部分固定尺寸类(size)失效问题咨询

这不是Tailwind的预期行为，问题出在Tailwind默认的间距（spacing）配置中不包含30和50这两个数值。

Tailwind的size-{n}类是直接复用spacing scale（间距刻度）的，默认情况下spacing只包含特定的步进数值——比如20（对应5rem）、40（对应10rem）、60（对应15rem）属于默认内置的刻度值，所以这些类能正常生效；但30、50不在默认列表里，因此Tailwind不会为它们生成对应的CSS类。

解决办法 #

方法1：自定义Tailwind配置，添加缺失的刻度值 #

修改项目根目录的tailwind.config.js，在theme.extend.spacing中添加需要的数值：

/** @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}",
  ],
  theme: {
    extend: {
      spacing: {
        '30': '7.5rem', // 对应size-30的宽高
        '50': '12.5rem', // 对应size-50的宽高
      },
    },
  },
  plugins: [],
}

保存配置后，重启Next.js开发服务器，size-30和size-50就能正常生效了。

方法2：使用任意值语法快速实现 #

如果只是临时需要特定尺寸，不想修改配置，可以用Tailwind的任意值语法直接定义尺寸：

<div className="size-[7.5rem] bg-red-100"></div>

这种方式支持任意单位（比如px、vw等），无需修改配置即可实时生效。

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