Tailwind CSS宽度表现异常咨询：为何宽度无法保持一致？

问题描述 #

我刚接触Tailwind CSS，尝试修改简单div的尺寸时出现异常，请问我哪里操作有误？为何Tailwind无法保持宽度的一致性？

代码示例 #

<body>
   <div class="w-4 h-6  bg-red-500">1</div>
   <div class="w-6 h-6  bg-red-500">2</div>
   <div class="w-8 h-6  bg-red-500">3</div>
   <div class="w-10 h-6  bg-red-500">4</div>
   <div class="w-12 h-6  bg-red-500">5</div>
   <div class="w-14 h-6  bg-red-500">6</div>
   <div class="w-16 h-6  bg-red-500">7</div>
   <div class="w-18 h-6  bg-red-500">8</div>
   <div class="w-20 h-6  bg-red-500">9</div>
   <div class="w-22 h-6  bg-red-500">11</div>
   <div class="w-24 h-6  bg-red-500">12</div>
   <div class="w-26 h-6  bg-red-500">13</div>
   <div class="w-28 h-6  bg-red-500">14</div>
   <div class="w-30 h-6  bg-red-500">15</div>
</body>

问题原因 #

你使用的w-18、w-22、w-26、w-30这些宽度类，在Tailwind CSS的默认配置中并不存在。Tailwind仅会为预定义的间距刻度值生成对应的工具类，未在配置中定义的类不会生效，对应的div会采用浏览器默认的行内块元素宽度（由内部文本宽度决定），这就是导致宽度不一致的核心原因。

默认的Tailwind间距刻度（用于宽度、高度、边距等属性）包含的数值有：0、0.5、1、1.5、2、2.5、3、3.5、4、5、6、8、10、12、16、20、24、32、40、48、56、64等，对应的类名如w-8、w-16、w-24都是有效的，但w-18这类不在默认列表中的数值无法被识别。

解决方法 #

方法一：使用默认支持的宽度类 #

直接替换为默认配置中存在的宽度类，比如将w-18替换为w-16或w-20，或者使用默认的有效递进值，确保所有div使用的宽度类都在Tailwind的默认支持范围内。

方法二：自定义间距刻度 #

在项目的tailwind.config.js配置文件中，扩展间距刻度，添加你需要的数值：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      spacing: {
        '18': '4.5rem',
        '22': '5.5rem',
        '26': '6.5rem',
        '30': '7.5rem',
      },
    },
  },
  plugins: [],
}

配置完成后，Tailwind会自动生成w-18、w-22等自定义宽度类，你可以直接在代码中使用。

方法三：使用任意值语法 #

如果只是临时需要某个特定宽度，可使用Tailwind的任意值语法，直接定义宽度数值，比如w-[4.5rem]（对应原w-18的宽度，因为Tailwind中w-1等于0.25rem，18×0.25rem=4.5rem），无需修改配置文件即可生效。

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