<p>Tailwind 的 [...] 语法仅对 m-、p-、mt-、pl- 等指定前缀生效，如 mt-[24px] 合法，而 rounded-[12px]、gap-[16px] 或含空格的 mt- [24px] 均无效；断点须按移动优先顺序书写（如 sm:m-2 md:m-4），且 mx-auto 居中需父容器为 block 或 flex 并有足够宽度。</p>
直接用方括号语法写任意值，但只对部分前缀生效
Tailwind 支持在 m-、p-、mt-、pl- 等间距类名后加 [...] 写自定义数值，比如 mt-[24px]、px-[0.875rem]、mb-[calc(100%-48px)]。这不是“配置”，而是 JIT 编译器动态生成 CSS 规则的语法，无需改 tailwind.config.js。
-
mt-[24px]✅ 合法，生成margin-top: 24px -
mt- [24px]❌ 中间有空格，JIT 完全忽略，DevTools 里查不到该规则 -
rounded-[12px]❌rounded-不在支持列表中，不会生成任何样式 -
gap-[16px]❌gap-类虽属布局，但官方未开放任意值支持（得用gap-4或自定义theme.extend.spacing）
想全局改默认间距刻度？动 theme.spacing 配置项
如果你团队统一用 8px 基数，又希望 m-4 表示 32px 而非默认的 1rem（16px），就得修改 tailwind.config.js 中的 theme.spacing：
module.exports = {
theme: {
spacing: {
'0': '0',
'1': '8px', // 原来是 0.25rem
'2': '16px', // 原来是 0.5rem
'4': '32px', // 原来是 1rem
'8': '64px', // 原来是 2rem
// ...其余按需补全
}
}
}注意：spacing 是完整覆盖，不是合并。漏掉 '3' 就会导致 m-3 失效；重定义后所有依赖 spacing 的类（如 padding、gap、inset）都会受影响。
为什么 mx-auto 居中失败？先看父容器 display 类型
很多人以为加了 mx-auto 就能居中，结果没反应——根本原因常不在 margin 本身，而在父容器的 layout 行为：
立即学习“前端免费学习笔记（深入）”；
- 父容器是
flex或grid，子元素默认flex-shrink: 1，会压缩宽度导致mx-auto无空间可分 → 加flex-shrink-0或显式设宽如w-64 - 父容器是
inline-flex或display: inline-grid→mx-auto不起作用，改用justify-center（flex 容器）或justify-self-center（grid 子项） - 父容器 width 为
fit-content或未设宽 →mx-auto没基准，得加w-full或明确宽度
响应式断点叠加时，顺序错一个就白写
Tailwind 断点是移动优先且严格覆盖的：小屏规则会被大屏规则覆盖，但前提是顺序正确。例如：
-
md:m-4 sm:m-2❌sm:m-2写在后面，但sm断点更小，实际永远不生效（md规则已覆盖） -
sm:m-2 md:m-4✅ 正确顺序：从sm开始，逐级向上增强 -
lg:m-0是“取消”外边距，不是lg:m-auto——后者是居中，不是清空 - 断点只看视口宽度，和容器
max-w-screen-md无关
最常被忽略的是：方括号语法容错极低，空格、单位缺失、前缀不支持，三者任一出错都静默失效；而断点顺序和父容器 display 类型，决定了再对的 m- 类也压根不执行。
