断点前缀（如md:text-lg）通过预设断点配置在构建时展开为独立媒体查询规则，交互前缀（如hover:）依赖用户状态且需配置启用，二者可叠加但顺序固定为断点→模式→交互。
断点前缀（如 md:text-lg）怎么生效的
它不是靠媒体查询嵌套生成，而是通过预设的断点配置，在构建时把每个带前缀的类名展开成独立规则。比如 md:text-lg 会被编译为：
@media (min-width: 768px) { .md\:text-lg { font-size: 1.125rem; } }注意冒号被转义成 \:，这是 CSS 类名合法化必需的。
常见错误是手动写 md:text-lg 却没启用 md 断点——比如 Tailwind 配置里删了 md，或用的是精简版 preset（如 @apply 时漏了响应式插件）。这时类名完全不会生成对应 CSS。
- 确认
tailwind.config.js的theme.breakpoints包含md键值对 - 用
@layer utilities自定义类时，@apply不支持响应式前缀，得改用@screen md手动包裹 - Vite / Next.js 环境下热更新可能缓存旧 CSS，修改断点后需重启 dev server
交互前缀（如 hover:bg-blue-500）依赖什么条件
这类伪类前缀本质是监听用户输入状态，但并非所有状态都默认启用。Tailwind 默认只开启 hover、focus、active、disabled 四种，且 hover 在触摸设备上默认禁用（避免误触发）。
典型问题：在 iPad 上 hover:bg-red-400 完全不生效。这不是 bug，是设计行为——Touch 设备无“悬停”概念，浏览器不会触发 :hover。
立即学习“前端免费学习笔记（深入）”；
- 若需强制启用 hover（如桌面+触屏混合场景），在
tailwind.config.js中设置hover: 'hover'（而非默认的'hover focus'） -
group-hover要求父元素有group类，且子元素必须是直接后代（.group > .group-hover:xxx），中间不能隔标签 -
focus-visible不是简单替换focus，它只在键盘导航时激活，鼠标点击后不触发
断点和交互前缀能叠加使用吗
能，但顺序固定：断点前缀必须在最左，交互前缀紧随其后。正确写法是 md:hover:bg-yellow-300；hover:md:bg-yellow-300 是无效的，编译器直接忽略。
这种限制源于原子化框架的解析逻辑——它按预设前缀表从左到右匹配，一旦遇到未知前缀就终止解析。所以 md 和 hover 必须出现在白名单顺序里。
- Tailwind v3.0+ 支持三段式组合，如
md:dark:hover:bg-gray-800（断点 → 模式 → 交互） - 自定义前缀（如
motion-safe:animate-fadeIn）必须在官方前缀之后，否则无法识别 - PostCSS 插件如
tailwindcss/nesting不影响前缀顺序解析，它只处理嵌套语法
为什么有些前缀类名生成了但没效果
最常被忽略的是 CSS 层叠优先级和 display 属性限制。比如 hidden 类设了 display: none，此时再加 hover:block 也无效——元素已脱离渲染流，hover 状态根本不会被检测到。
另一个隐形坑是伪类触发条件：例如 disabled:opacity-50 只对原生表单控件（button、input）或带 disabled 属性的元素生效；给 div 加 disabled 属性不会触发，因为 HTML 规范不承认它的语义。
-
peer-checked:peer-focus:bg-green-500要求peer元素是同级且在前，且必须是 checkbox/radio -
aria-前缀（如aria-expanded:rotate-180）依赖真实的 ARIA 属性变更，JS 不手动 setAttribute 就不会响应 - 构建时若启用了
purge（v2）或content路径未覆盖 JS 动态拼接的类名，这些前缀类会被删除
