为什么在Tailwind CSS中建议避免在基础CSS标签上直接应用样式？-css教程-PHP中文网

tailwind 的 preflight 已重置基础样式，因其基于 modern-normalize 并增强 html、body、h1–h6 等元素的 margin、padding、font-size 等；直接写 h1 { font-size: 2rem; } 会破坏顺序控制、主题继承与 tree-shaking；应使用 @layer base 或根元素加 class 安全扩展。

为什么在tailwind css中建议避免在基础css标签上直接应用样式？

为什么 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：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

原因很实际：

无需额外 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;
  }
}

因为：