Tailwind配置文件中base项的作用是什么？支持哪些配置？

1. @tailwind base 指令的核心作用 #

你在CSS入口写的@tailwind base是Tailwind的层指令，作用是预留基础样式的注入位置。编译阶段Tailwind会把所有属于基础层的样式都输出到这个指令对应的位置，它是三个层级里优先级最低的，会被后续的components、utilities层样式覆盖。
默认情况下，这个指令会先注入内置的浏览器样式重置规则（基于Normalize.css），比如统一设置box-sizing: border-box、清除所有元素默认的内外边距、统一不同浏览器的表单元素默认样式等，解决不同浏览器的原生样式差异问题。

2. 配置文件中base项和指令的关联 #

tailwind.config.js里配置的base相关内容，最终都会被编译到@tailwind base对应的样式层里，两者是配置和输出占位符的关系：你在配置里定义的全局基础规则，最后都会插到你写的@tailwind base的位置，统一作为全局基础样式生效。

3. base项可配置的内容 #

base层的定位是全局基础样式，所有需要全局默认生效、不需要频繁覆盖的规则都可以放在这里，常见配置项包括：

• 全局根样式：比如html标签的默认字号、滚动行为，body的默认字体、文字颜色、页面背景色
• 原生标签的默认样式：比如h1~h6的默认字号和字重、p标签的默认行高、a标签的默认颜色和交互效果、列表的默认缩进等
• 全局自定义变量：可以在这里定义全局CSS自定义属性，比如主题色、通用间距、动画时长等，后续所有层级都可以复用
• 自定义字体声明：@font-face引入自定义字体的规则通常都放在base层，保证全局可调用
• 全局样式重置：如果需要覆盖某些第三方依赖的默认样式，也可以统一写在base层

4. 常见配置示例 #

配置文件写法示例 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      base: {
        html: {
          fontSize: '14px',
          scrollBehavior: 'smooth'
        },
        body: {
          fontFamily: '"PingFang SC", sans-serif',
          color: '#222',
          backgroundColor: '#f5f5f5'
        },
        a: {
          color: '#165DFF',
          textDecoration: 'none',
          '&:hover': {
            color: '#4080FF'
          }
        }
      }
    }
  }
}

入口CSS直接写base层样式示例 #

你也可以直接在入口CSS里用@layer base包裹自定义基础规则，效果和配置文件里写是一样的，都会合并到base层：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-3xl font-bold mb-4;
  }
  h2 {
    @apply text-2xl font-semibold mb-3;
  }
  ul, ol {
    @apply pl-5 mb-3;
  }
}

内容的提问来源于stack exchange，提问作者Danoosh Jooybar