Tailwind 的 preflight 已重置基础样式，因其基于 modern-normalize 并增强 html、body、h1–h6 等元素的 margin、padding、font-size 等；直接写 h1 { font-size: 2rem; } 会破坏顺序控制、主题继承与 tree-shaking；应使用 @layer base 或根元素加 class 安全扩展。
为什么 Tailwind 的 preflight 已经重置了基础样式
Tailwind 默认启用的 preflight 本质是 modern-normalize 加少量增强，它已经统一处理了 html、body、h1–h6、p、ul、button 等元素的 margin、padding、font-size、line-height 和 box-sizing。直接在 CSS 中写 h1 { font-size: 2rem; } 会绕过这套机制，导致：
- 样式位置不可控：普通 CSS 规则默认插入到
@tailwind base之后，可能被preflight覆盖，也可能反过来覆盖preflight，结果取决于加载顺序和 specificity - 无法参与 Tailwind 的主题系统：硬编码值（如
2rem）脱离theme('fontSize.xl')配置，后续改主题时不会同步更新 - Tree-shaking 失效：Tailwind 不扫描你手写的 CSS，哪怕这个
h1样式从未在 HTML 中出现，也会被打包进去
@layer base 是唯一安全的扩展入口
如果你确实需要调整基础元素样式（比如统一所有标题的 font-weight 或给 a 加默认下划线），必须用 @layer base，而不是裸写 CSS：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-3xl font-bold;
}
a {
@apply underline hover:no-underline;
}
}
这样做的关键作用是：
- Tailwind 会把这段 CSS 插入到
@tailwind base展开的位置，和preflight处于同一层级，顺序可控 -
@apply确保复用已定义的 theme 值，比如text-3xl对应theme('fontSize.3xl') - 插件方式（
addBase）也行，但仅适合需要动态计算或条件逻辑的场景，日常静态调整用@layer base更直观
直接给 html 或 body 加 class 更轻量
对根元素做全局控制（如字体、背景、文字颜色），优先往 HTML 标签上加类，而不是写 CSS：
立即学习“前端免费学习笔记（深入）”；
<html lang="zh-CN" class="text-gray-800 bg-white antialiased"> <body class="min-h-screen">
原因很实际：
- 无需额外 CSS 文件或构建步骤
- 类名可响应式（
sm:text-lg）、可状态化（dark:bg-gray-900） - 完全走 Tailwind 的编译链路，享受 purge 和 theme 继承
- 避免因 CSS 文件加载延迟导致的 FOUC（Flash of Unstyled Content）
容易踩的坑：自定义 @font-face 放错位置
很多人把 @font-face 写在 @layer base 外面，结果字体加载失败或 fallback 异常。正确做法是：
@layer base {
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-var-latin.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
}
}
因为：
-
@font-face必须在使用前声明，而@layer base是最早执行的层 - 放在
@layer components或utilities里，可能导致某些 class（如font-sans）引用时字体还未就绪 - 不能用
@apply处理@font-face，它只适用于样式声明，不是类名
真正要警惕的不是“能不能写”，而是“写在哪”——Tailwind 的层序模型（base → components → utilities）决定了几乎所有扩展行为的可靠性边界。
