tailwind本身不控制css继承逻辑，所谓“继承问题”实为误用不可继承属性或受预设样式、优先级、继承链中断干扰；text-sm可继承（因设置font-size），但若子元素显式声明font-size类则覆盖继承值。
Tailwind 本身不控制 CSS 继承逻辑，所谓“Tailwind 的继承问题”其实是你误用了不可继承属性，或被预设样式、优先级、继承链中断干扰了——它不是 Tailwind 的 bug，而是对 CSS 基础规则的误判。
为什么 text-sm 没传给子元素，但 color 却传了？
CSS 继承有明确边界：color、font-size、font-family 等可继承；margin、padding、display、width 等默认不继承。Tailwind 的 text-sm 本质是设置 font-size: 0.875rem，它本身可继承；但如果你在父元素上加了 text-sm，子元素却没变小，大概率是子元素自己写了 text-base 或其他 font-size 工具类，显式覆盖了继承值。
- 检查子元素是否声明了任何 font-size 类（如
text-lg、text-[14px]）——显式样式永远胜过继承 - 确认父元素的
text-sm确实生效（DevTools 的 Computed 面板看 font-size 是否为 0.875rem） - 注意：若父元素用了
text-[16px]这类自定义值，子元素不会自动继承这个像素值，仍需靠可继承性传递
button 里的文字颜色没继承父级 color，怎么回事？
这不是继承失效，是 Tailwind 的 @tailwind base（即 preflight）重置了 button 默认样式。它给 button, [type='button'] 显式设置了 color: inherit —— 听起来像会继承，但实际被浏览器 UA 样式或更早的 reset 干扰了。
- 打开 DevTools，选中 button 内的文字，看 Computed 的 color 来源：如果是
color: initial或来自 user agent stylesheet，说明 preflight 之外还有别的重置在起作用 - 最直接验证方式：临时删掉
@tailwind base，再看文字是否恢复继承 - 若必须保留 preflight，可在 button 上显式加
text-inherit（Tailwind 提供的工具类），或用text-current强制取父级 color
为什么加了 all: inherit 也没用？
all: inherit 确实能让子元素继承所有父级计算后的样式，但它不能绕过 display: none、content-visibility: hidden、Shadow DOM 这些继承链中断条件，也不能让不可继承属性“变可继承”——它只是把父元素当前生效的所有样式值（包括那些本不可继承的）强制赋给子元素，属于“复制”，不是“继承”。
- 如果父元素
display: none，子元素即使写all: inherit也渲染不出来（继承链已断） - 如果父元素用了
font-size: clamp(...)这类复杂值，all: inherit可能因浏览器解析差异导致 fallback 失效 - 慎用：它会覆盖子元素所有原生默认行为（比如 input 的 placeholder 颜色、select 的下拉箭头），调试成本高
npm 包里 text-base 在不同项目中大小不一致怎么办？
根本原因是 text-base 默认映射到 1rem，而 rem 依赖根元素 html { font-size }。宿主项目改了根字号，你的组件就跟着缩放——这不是继承问题，是单位设计使然。
- 在 npm 包自己的
tailwind.config.js中，用theme.extend.fontSize把base改成固定像素：'base': '16px' - 不要动
theme.fontSize.base（会覆盖全部默认字号），只用extend局部修正 - 验证方式：构建后查输出 CSS，确认
.text-base对应的是font-size: 16px，而非1rem
真正卡住人的从来不是“怎么让子元素继承”，而是没分清哪些属性本就不该指望继承——比如 padding、border、flex-direction。Tailwind 不制造继承问题，它只是把 CSS 规则暴露得更直白而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
