伪类变体（如 first:、hover:）不能在 @media 中直接使用，必须写在 html class 属性中由 tailwind 编译生成；theme('screens.xxx') 在生产构建中易失效，应改用 css 变量；first:/last: 依赖干净 dom 结构；dark: 需置于断点后、状态前。
伪类变体（如 first:、hover:）不能嵌套在 @media 里直接用
你写 @media (min-width: 768px) { .first\:mt-0 { margin-top: 0; } } 是无效的。Tailwind 的 first:、hover: 这类变体是编译时生成的选择器，不是运行时可复用的 CSS 类名。它们必须出现在 HTML class 属性中，由 Tailwind 解析并产出对应 CSS 规则，而不是你在自定义 CSS 块里“手动调用”。
常见错误现象：在 @layer utilities 或 @layer components 里写 first:mt-0，结果样式不生效；或者试图在 @media 内部重复使用带冒号的工具类名——这只会被当作普通类名处理，不会触发伪类逻辑。
- 正确做法是把响应式 + 伪类组合写在 HTML 上：
class="md:first:mt-0 md:last:mb-0" - Tailwind 会为每个断点 + 伪类组合生成独立规则，比如
.md\:first\:mt-0@media (min-width: 768px) { .md\:first\:mt-0:first-child { margin-top: 0; } } - 如果你需要更细粒度控制（比如只在大屏下移除第一个子项的上边距），就别拆开写，直接用组合类名
媒体查询中不要直接调用 theme('screens.xxx')
像 @media (min-width: theme('screens.lg')) { ... } 这种写法在开发环境可能“看起来”能跑，但生产构建时大概率失效。根本原因不是 Tailwind 不支持，而是 PostCSS 插件链（尤其是 cssnano）会在压缩阶段破坏这种函数调用的语法结构，导致生成的 CSS 无效或解析失败。
典型报错不会直接提示，而是表现为：某段样式在 dev 模式正常，build 后完全消失；或者 text-shadow 等多值属性因空格被删而崩溃。
- 推荐做法：提前把断点值导出为 CSS 变量，在
:root或@layer base中声明：--breakpoint-lg: 1024px; - 然后在媒体查询中使用：
@media (min-width: var(--breakpoint-lg)) { ... } - 如果要用 JS 动态读取，建议从
tailwind.config.js导出 JSON 或 JS 对象，再在组件里 import，而不是在 CSS 中硬编码theme()
first: / last: 生效的前提是 DOM 结构干净
first: 和 last: 对应的是 :first-child 和 :last-child，它们只看父元素下的子节点顺序，不区分文本节点、注释、<div> 还是 <code><li>。中间插一个 <!-- comment --> 或一段空白文本，就可能导致 first:mt-0 完全不触发。
常见错误场景：用 v-for（Vue）或 {items.map()}（React）渲染列表时，JSX/模板里写了换行或注释；Svelte 组件中用了 {#if} 包裹部分项；Nuxt 页面里有服务端注入的文本节点。
- 检查方式：打开浏览器开发者工具，选中父容器，看 Elements 面板里第一个/最后一个子节点是不是你预期的那个元素
- 修复手段：确保列表项是父容器的**直系、连续、无干扰**子节点；必要时用
group+group-first替代（需配合group类包裹） - flex/grid 布局本身不影响
first:生效，问题永远出在层级或 DOM 干扰上，不是布局模式的问题
dark: 和 媒体查询可以共存，但顺序有影响
你可以写 md:dark:hover:bg-gray-800，Tailwind 会按顺序生成对应规则：@media (min-width: 768px) { .dark .md\:dark\:hover\:bg-gray-800:hover { background-color: #1f2937; } }。但要注意，dark: 必须放在媒体查询前缀之后、状态前缀之前，否则编译失败或逻辑错乱。
错误写法：dark:md:hover:bg-gray-800（dark 在最前）或 md:hover:dark:bg-gray-800（dark 在状态后）都不会生成有效 CSS。
- 合法顺序是：
[断点]:[dark]:[状态]:[工具类]，例如lg:dark:focus-within:ring-blue-500 - 如果同时要适配深色模式和宽屏，优先用组合类名，别拆成两层
@media+@media (prefers-color-scheme: dark)—— 那样维护成本高且容易漏覆盖 - 注意 Nuxt 或 Next.js 的 SSR 场景下，
dark:类默认不激活，需配合data-theme="dark"或 class 切换机制
实际项目里最容易被忽略的，是伪类变体对 DOM 结构的强依赖和媒体查询中 theme() 调用的构建时脆弱性——这两处不出问题则已，一出就是“dev 正常 prod 失效”这种难定位的坑。
