mt-[23px]不生效主因是Tailwind版本或JIT模式未启用，需v3.0+且未设mode:'aot'，并确保content路径覆盖、避免动态拼接，推荐复用值配入theme.spacing。

为什么 mt-[23px] 有时不生效

直接写 mt-[23px] 确实能生成对应 CSS，但 Tailwind 默认只对 JIT 模式启用“任意值”支持。如果你用的是旧版（v2.x 或未开启 JIT 的 v3.x），这个语法会被忽略，最终没有生成对应样式。

确认是否生效最简单的方法：检查构建后的 CSS 文件里有没有类似 .mt-\[23px\]{margin-top:23px} 的规则；或者打开浏览器开发者工具，看元素上是否有该 class 被应用且无 strike-through。

• 确保使用 Tailwind v3.0+，且 tailwind.config.js 中已启用 JIT（v3.0+ 默认开启，但若手动设了 mode: 'aot' 就会禁用）
• 检查 content 配置是否覆盖到你写 mt-[23px] 的文件路径，否则 JIT 不会扫描并生成该类
• 避免在动态拼接字符串中使用，比如 className={`mt-[${size}px]`} —— JIT 无法静态分析，不会生成对应类

mr-[1.75rem] 和 mr-[7px] 的单位支持范围

Tailwind 允许在方括号内写任意合法 CSS 长度值，包括 px、rem、em、%、vh、vmax 等，甚至支持带符号的值（如 ml-[-12px]）和 calc 表达式（如 pt-[calc(1rem-2px)]）。

但要注意：JIT 会原样透传给 CSS，不做单位换算或验证。如果写了 mb-[23fr]，它也会生成，但 fr 在 margin 上无效，浏览器会忽略 —— Tailwind 不负责语义校验。

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 推荐优先用 px 或 rem，语义清晰且兼容性好
• 写 calc() 时记得外层加引号（JSX 中）：className="pl-[calc(100%-theme(spacing.8))]"
• 负值必须显式带减号，ml-[-8px] ✅，ml-[-8px] 不能写成 ml-[-8px]（注意转义：实际代码中无需双反斜杠，但 HTML 属性值里若含 [ 和 ]，需确保模板引擎不误解析）

替代方案：什么时候不该用 [23px]，而该配 theme.spacing

如果 23px 是设计系统中反复出现的基准间距（比如卡片内边距、按钮图标间距），硬编码进模板会降低可维护性。这时应把它加入主题配置，而不是散落在各处的方括号里。

在 tailwind.config.js 的 theme.spacing 下扩展：

module.exports = {
  theme: {
    extend: {
      spacing: {
        '23': '23px',
        'card-padding': '23px',
      }
    }
  }
}

之后就能用 pt-23 或 px-card-padding，支持响应式前缀（md:pt-23），也参与缩放（如配合 scale-95 时更可控）。

• 方括号适合一次性、临时、非设计系统的数值
• 配进 spacing 更适合被复用、命名有意义、需响应式控制的值
• 配完记得重启 dev server，否则 JIT 不会立即识别新 key

与 !important 和插件冲突的边界情况

方括号语法生成的类默认没有 !important，但如果项目启用了 important: true（全局加 !important），那 mt-[23px] 也会带上。这通常不是预期行为，尤其当你要覆盖第三方组件的 margin 时，反而可能因层级过高导致难调试。

另一个隐性坑：某些自定义插件（比如 @tailwindcss/aspect-ratio 或手写的 plugin(({ addUtilities }) => {...})）若内部依赖 spacing 映射，它们不会自动识别方括号里的任意值 —— 因为那些值根本没进 theme 配置。

• 查配置里有没有 important: true，如有且不希望影响任意值，建议改用选择器层级（如 div > .mt-[23px]）代替全局 !important
• 若插件功能依赖 spacing（例如生成 padding 工具类），而你又大量用 [xxpx]，说明设计系统可能已脱节，该回归配置或重构插件逻辑

Tailwind 的方括号语法是把双刃剑：它解了一时之急，但也容易掩盖设计系统缺失的问题。真正难的不是写出 mb-[23px]，而是判断这个 23 是偶然还是共识。