如何在Next.js+Tailwind项目中添加全局可用的自定义Tailwind类

API 探路者

2026-9-27

需按以下步骤检查并补充配置即可让自定义类全局生效：

适配Tailwind版本的配置字段
如果你使用的是Tailwind CSS v3及以上版本，原配置中的purge字段已被弃用，需要替换为content字段，同时如果是Next.js 13+使用App Router的场景，需要额外添加app目录的扫描路径，修改后的配置参考：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
      './pages/**/*.{js,ts,jsx,tsx}',
      './components/**/*.{js,ts,jsx,tsx}',
      // App Router 项目新增下面这行
      './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
      extend: {
          height: {
              '60': '60rem',
              '40': '40rem',
              '55': '55rem',
              '180': '180px',
          },
          colors: {
              'primary': '#0B003A',
          },
      },
  },
  variants: {
      extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
}

1. 确认全局CSS正确引入Tailwind指令
  项目全局CSS文件（通常为styles/globals.css）必须包含以下三行基础指令：
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
同时确认该全局CSS文件已在入口文件引入：Pages Router项目在pages/_app.jsx中导入，App Router项目在app/layout.jsx中导入。
1. 检查自定义类的使用方式
  你当前配置扩展的属性对应类名规则为：height属性对应h-*类（如h-180、h-60），colors属性对应bg-*、text-*、border-*等类（如bg-primary、text-primary），注意不要写错命名格式。
1. 重启开发服务
  修改tailwind.config.js后必须手动重启Next.js开发服务器，新配置才会生效。
1. 额外自定义工具类的补充配置（非必须，仅当你需要添加非theme扩展的自定义类时使用）
  如果你需要自定义独立的工具类，可以在全局CSS的@layer utilities中定义，示例：
```
@layer utilities {
  .custom-shadow {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
}
```
定义后的类可在项目任意位置直接使用，且会被Tailwind统一处理。