@layer base 必须紧接在 @tailwind base 之后，否则自定义基础样式会因被 Tailwind 重置规则覆盖而静默失效；其内应优先使用 @apply 复用主题配置，并通过开发者工具中 data-layer="base" 标签验证生效。
@layer base 必须紧接在 @tailwind base 之后，否则你的自定义基础样式大概率静默失效。
为什么 @layer base 写在 @tailwind base 前面就无效？
Tailwind 编译时按顺序拼接 CSS 规则。@tailwind base 输出的重置规则（比如 * { box-sizing: border-box }、html { font-size: 16px }）会覆盖更早声明的同选择器样式。如果你把 @layer base 放在 @tailwind base 前面，浏览器实际加载顺序是「你的样式 → Tailwind 重置 → Tailwind 其他层」，结果就是你的 h1 或 textarea 样式被重置规则压制。
- 常见错误写法：
@layer base { h1 { @apply text-3xl; } }出现在@tailwind base之前 - 正确顺序只有一种：
@tailwind base必须是文件中第一个 Tailwind 指令，紧接着就是@layer base - 多个
@layer base块会被合并，但都必须出现在@tailwind base之后、@tailwind components之前
@layer base 里该用 @apply 还是直接写 CSS？
优先用 @apply，它复用 tailwind.config.js 主题配置，自动适配响应式断点和 dark: 变体；手写值（如 font-size: 1.875rem）会脱离设计系统，后期维护成本陡增。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
@apply在@layer base中完全可用，例如：textarea { @apply rounded-lg border border-gray-300; } - 需要动态取主题色时，用
theme('colors.primary.DEFAULT')，前提是已在配置中定义了primary - 避免写
border: 1px solid #eab308—— 这绕过主题，换色时得全局搜索替换 -
@apply不支持伪类链式调用，textarea:focus必须单独写规则，不能塞进同一行
怎么确认 @layer base 真正生效了？
打开浏览器开发者工具的 Styles 面板，选中目标元素（比如一个 <textarea>），看最终生效的样式来自哪一行。关键线索有两个：
立即学习“前端免费学习笔记（深入）”；
- 所有 Tailwind 工具类都带
data-tailwind="true"属性（开发模式下） - 你写的
@layer base会生成一个独立的<style>块，标签为data-layer="base" - 如果看到你的样式出现在
data-layer="base"下，且没有被data-tailwind="true"的规则覆盖，说明顺序和写法都对了 - 如果没出现，先检查 PostCSS 是否真在构建流程中运行 —— 终端日志比反复改 CSS 更快定位问题
真正卡住人的往往不是语法本身，而是 @tailwind base 是否确实是文件第一行 Tailwind 指令，以及 PostCSS 插件有没有真正参与编译。多看一眼构建日志里的 tailwindcss 输出行，比盯着 CSS 文件空想更有效。
