Next.js+TypeScript中如何正确配置Tailwind CSS自定义颜色主题？

方案1：将Tailwind配置文件改为TypeScript格式 #

• 把根目录的tailwind.config.js重命名为tailwind.config.ts
• 在tailwind.config.ts里直接用import引入你的theme.ts文件，示例：

  import type { Config } from 'tailwindcss'
  import { customColors } from './theme'
  
  const config: Config = {
    content: [
      './pages/**/*.{js,ts,jsx,tsx,mdx}',
      './components/**/*.{js,ts,jsx,tsx,mdx}',
      './app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
      extend: {
        colors: customColors,
      },
    },
    plugins: [],
  }
  export default config
  

• 你的theme.ts保持导出颜色对象即可，示例：

  export const customColors = {
    primary: '#165DFF',
    secondary: '#FF7D00',
    // 其他自定义色值
  }
  

方案2：保持tailwind.config.js为CommonJS格式，用require引入 #

如果不想改配置文件后缀，可调整主题文件的导出格式：

• 把theme.ts改为theme.js，用CommonJS语法导出：

  module.exports = {
    customColors: {
      primary: '#165DFF',
      secondary: '#FF7D00',
      // 其他自定义色值
    }
  }
  

• 然后在tailwind.config.js里用require引入：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      './pages/**/*.{js,ts,jsx,tsx,mdx}',
      './components/**/*.{js,ts,jsx,tsx,mdx}',
      './app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
      extend: {
        colors: require('./theme').customColors,
      },
    },
    plugins: [],
  }
  

关键说明 #

错误核心原因是tailwind.config.js默认被Node.js当作CommonJS模块处理，无法识别ES模块的import语法。改成.ts配置文件后，Next.js会自动处理TS编译，支持ES模块语法；若坚持用.js，则必须用CommonJS的module.exports和require语法来匹配。

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