如何在React+Vite项目中覆盖TailwindCSS v4默认样式

1. 生成Tailwind配置文件 #

TailwindCSS v4默认不会自动生成配置文件，你需要手动创建：

• 在项目根目录打开终端，执行命令：

  npx tailwindcss init
  

  执行后会在根目录生成基础的tailwind.config.js文件，初始内容如下：

  /** @type {import('tailwindcss').Config} */
  export default {
    content: [],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

2. 配置内容扫描路径 #

首先要把React项目的组件和HTML文件路径加入content字段，否则Tailwind无法识别页面中的类名并生成对应样式：

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}", // 扫描src下所有React组件文件
  ],
  // ...其他配置
}

3. 覆盖/扩展默认样式 #

Tailwind v4通过theme字段管理样式配置，分两种场景：

3.1 完全替换默认样式 #

直接在theme下定义属性，会完全覆盖Tailwind的默认值。比如替换默认字体、颜色：

theme: {
  // 替换默认无衬线字体
  fontFamily: {
    sans: ['Inter', 'system-ui', 'sans-serif'],
  },
  // 替换默认颜色系统
  colors: {
    primary: '#165DFF',
    secondary: '#6B7280',
    neutral: '#F3F4F6',
  },
},

3.2 扩展默认样式（保留原有样式） #

如果需要在默认样式基础上新增自定义样式，使用theme.extend字段：

theme: {
  extend: {
    // 新增自定义颜色
    colors: {
      accent: '#F59E0B',
    },
    // 新增自定义间距
    spacing: {
      '128': '32rem',
    },
    // 新增自定义阴影
    boxShadow: {
      'soft': '0 2px 10px rgba(0,0,0,0.05)',
    },
  },
},

3.3 修改核心插件默认值 #

对于圆角、边框宽度这类核心插件的默认值，同样在theme字段直接定义即可覆盖：

theme: {
  borderRadius: {
    none: '0',
    sm: '0.125rem',
    DEFAULT: '0.5rem', // 替换默认圆角值
    lg: '1rem',
  },
},

4. TypeScript项目可选配置 #

如果你的Vite React项目使用TypeScript，可以创建tailwind.config.ts来获得更好的类型提示：

import type { Config } from 'tailwindcss'

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // 自定义配置
    },
  },
  plugins: [],
} satisfies Config

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