extend 必须写在 plugins 之前，否则插件中调用 theme() 获取未扩展的值会返回 undefined，导致类名失效。
tailwind.config.js 里 extend 和 plugins 哪个该先配
配置顺序直接影响类名是否生效，extend 必须写在 plugins 之前。Tailwind 的解析是单次遍历：先合并 theme.extend 到基础主题，再运行 plugins 里的函数——如果插件里调用了 theme('colors.red.500') 却没提前把 red 加进 extend，就会返回 undefined，最终生成空类或报错。
- 常见错误现象：
bg-red-900不生效，但bg-red-500可用 → 很可能是自定义色值只加在extend.colors里，却漏了900级别 - 使用场景：添加品牌主色、深色模式专用灰阶、设计系统里预留的 spacing 刻度（如
18、22） - 参数差异：
extend是对象合并，不覆盖原主题；plugins是函数数组，每个函数接收{ addUtilities, theme }等上下文，适合生成非标准类（如@layer utilities）
class="flex flex-col md:flex-row" 在 Safari 15.6 下不换行
这是 Safari 对 flex-direction 的旧版解析 bug，不是 Tailwind 本身问题。当父容器未显式设置 min-width: 0 或 width: fit-content，且子元素含长文本/内联块时，Safari 会错误计算主轴尺寸，导致 md:flex-row 失效。
- 常见错误现象：开发时 Chrome 正常，CI 构建后 QA 在 Safari 报“布局塌陷”，控制台无报错
- 实操建议：在触发问题的父容器上加
min-w-0（对应min-width: 0），或改用flex-wrap+flex-basis组合替代纯flex-row - 兼容性影响：仅影响 Safari ≤15.6 和部分 iOS WebKit 内核，无需 polyfill，但必须加到实际 DOM 节点，不能靠父级
@layer注入
purge: content 配置漏掉动态 class 字符串
用 clsx 或模板字符串拼接类名时，PurgeCSS 无法静态分析，会导致生产环境丢失样式。比如 className={`text-${size}-font`} 中的 sm-font、lg-font 不会被提取。
- 常见错误现象：本地
npm run dev全部正常，npm run build后部分文字颜色/尺寸消失 - 使用场景：组件库中封装 size、variant、state 等 prop 映射类名；i18n 切换时动态插入语言前缀（如
zh-text-left） - 实操建议：在
purge.content数组里加 glob 路径./src/**/*.{js,ts,jsx,tsx}，并配合safelist写正则，例如/^text-(sm|md|lg)-font$/；避免用!important强制保留——它会让整个 Purge 流程失效
dark: vs. @media (prefers-color-scheme: dark) 的优先级冲突
dark: 是 Tailwind 的变体（variant），本质是给 class 加前缀；而 @media 是 CSS 原生媒体查询。两者嵌套时，若同时修改同一属性（如 color），@media 规则会覆盖 dark:，因为它的 specificity 更高且作用域更广。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：写了
dark:text-white md:dark:text-gray-200，但在某个组件里加了@media (prefers-color-scheme: dark) { .foo { color: #333 } }→ 深色下文字变成灰色 - 实操建议：统一用
dark:控制主题态，删掉手写的@media；必须共存时，把@media规则写在tailwind.css导入之后，并确保选择器 specificity 不高于 Tailwind 生成的类（即别用.foo .bar去压dark:text-white） - 性能影响：混用会增加 CSS 文件体积，且浏览器需多解析一层媒体查询，对低端安卓 WebView 可能造成渲染延迟
最麻烦的其实是 dark: 和 group-hover:dark: 这类嵌套变体的组合——它们生成的 CSS 规则层级很深，一旦和自定义 @layer components 冲突，调试时得直接看编译后的 CSS 文件，而不是源码里的类名。
