核心观点：CSS 级联按"属性"算胜负，不是按"类名"合并。
.flex-col 会把 utils.css 的 .lg:flex-row 改回去微前端样式隔离的本质是"作用域隔离"——子应用样式限定在自己容器内，不污 染全局。
#subapp .btn { ... }CSS @layer 用声明式层级替代了特异性战争——无需 !important 也能精确控级。
!important 反转层级，重要样式反而走底层. 访问，写成 @layer base.forms { }Tailwind v3 的三条 @tailwind 指令对应 三个不同职责,不是同级概念。
.btn),中间层base → components → utilities,后写的赢@import "tailwindcss",components 删原则:重置写 base,复合组件写 components,原子类写 utilities。
Tailwind v4 重新设计 CSS 入口,几条新指令各司其职,不再像 v3 那样靠 @tailwind 堆叠。
@tailwind,整合 base + utilities@layer 写法base → utilities 两层核心:@theme 把设计 token 从 JS 搬到 CSS,样式与变量同源。
Tailwind 是构建时按需生成 CSS 的工具，不是预制类库。 这是它和 Bootstrap、iconfont 这类传统 class 库最本质的区别。
tailwind.config.js 的 content 必须覆盖到所有源码路径input:checked 改成父元素边框高亮、img 存在时父容器切两栏布局、表单校验状态动态联动——以前这些都需要 JS 去监听子元素状态再回头改父元素。:has() 的出现，把"子元素状态驱动父元素样式"这件事直接搬进了 CSS。
:has() 是名副其实的父选择器，根据子元素/后代/兄弟的状态反向匹配父元素或前面的兄弟。.card:has(img)）的开销是微秒级；只有 div:has(...) 这种宽泛选择器 + 频繁 DOM 变更时才是问题。:has() 替代 JS 后代码量减半、不会漏同步。性能提醒：:has() 选择器锚定越具体越好，避免 body:has()、*:has() 这种全局监听。
Preflight 是 Tailwind CSS 内置的「基础样式重置/规范化」工具，基于 modern-normalize，抹平浏览器默认样式差异，统一基线，让你只用工具类就能一致地控制布局与外观。
核心做了 5 件事：
全局 box-sizing：所有元素默认 border-box，保证 padding/border 不会撑宽元素
清空默认边距：清除 h1~h6、p、ul、blockquote 等默认 margin/padding，避免意外留白
语义化但无外观：标题不再自带大小/加粗，列表去掉项目符号，只保留语义
媒体默认 block：img、svg、video、canvas 默认 display: block，避免底部空白间隙
表单元素统一：修复 Safari 等浏览器的控件样式差异，继承字体
Flexbox 是 容器定方向，子项定大小 两套属性加起来 12 个的事。
display: flex 一行，元素变弹性容器gap 替代 margin 间距