m-4没生效是因为被更高优先级样式覆盖，需用开发者工具检查是否被划掉；响应式用md:m-4等断点前缀；mx-auto失效多因父容器无明确宽度或为flex/grid；间距不准需查tailwind.config.js的theme.spacing配置。
为什么 m-4 没生效？检查是否被其他样式覆盖
Tailwind 的 m- 类本质是生成内联的 margin 声明，优先级不如 !important 或高 specificity 的 CSS 规则。常见于组件库（如 Headless UI、Shadcn）自带的重置样式，或你自己写的 .card { margin: 0 !important; }。
- 用浏览器开发者工具检查元素，看
margin是否被划掉（strikethrough），被划掉说明被覆盖 - 避免在全局 CSS 中对通用标签（如
div、section）写margin: 0，它会无差别压制m-类 - 真需要覆盖时，用
!m-4（加感叹号前缀）强制提升优先级，但这是权宜之计，不是设计意图
响应式外边距怎么写？直接在类名里加断点前缀
Tailwind 的响应式机制是“移动优先”，m-2 是所有屏幕尺寸的默认值，md:m-4 表示从 md 断点（768px）起才生效，更小屏幕仍用 m-2。
- 断点顺序必须严格：
sm→md→lg→xl→2xl，不能跳写lg:m-4 sm:m-2（后者会被前者覆盖） - 想让某个尺寸“取消”外边距，用
md:m-0，别写md:m-auto——m-auto是居中用的，不是清空 - 注意
max-w-screen-md这类容器宽度不影响断点行为，断点只看视口宽度，不是容器宽度
mx-auto 居中失效？确认父容器有明确宽度且不为 fit-content
mx-auto 依赖块级元素的自动外边距计算逻辑，前提是元素本身有可计算的宽度（比如没设 width: 100% 或 flex 子项默认撑满）。
- 常见失效场景：父容器用了
flex，子元素默认flex-shrink: 1，会压缩宽度导致mx-auto无空间可分 - 解决方法：给子元素加
flex-shrink-0或显式设宽，如w-64 mx-auto - 如果父容器是
inline-flex或grid，mx-auto不起作用，得改用justify-self-center（grid）或justify-center（flex 容器）
间距值对不上设计稿？查 Tailwind 配置里的 theme.spacing
Tailwind 默认的 m-4 是 1rem（16px），但很多团队会修改 tailwind.config.js 中的 theme.spacing，比如改成 4px 一档（4: '4px'），这时 m-4 就真变成 4px，和 Figma 里标 16px 对不上。
- 打开项目里的
tailwind.config.js，搜spacing，看是否自定义过数值映射 - 没改配置时，标准映射是：
1 → 0.25rem、2 → 0.5rem、4 → 1rem、8 → 2rem - 如果设计系统用的是 8px 基数，建议保持默认配置，用
m-2（8px）、m-4（16px）这类，别自己重定义成4: '8px'，否则后期维护成本高
最常被忽略的是断点叠加顺序和父容器 display 类型——这两个地方出问题，再对的 m- 类也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
