如何在带App Router与TS的最新Next.js中通过postcss.config.mjs添加Tailwind自定义颜色

不需要修改postcss.config.mjs文件，自定义Tailwind颜色的配置完全在tailwind.config.ts中完成，postcss文件仅负责指定PostCSS要使用的插件，和样式变量无关。

具体步骤： #

1. 打开项目根目录下的tailwind.config.ts文件（如果没有，手动创建一个）
2. 在theme.extend对象中添加colors字段，定义你的自定义颜色：

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        // 单值颜色
        primary: '#165DFF',
        secondary: '#FF7D00',
        // 多色调颜色（可通过DEFAULT指定默认值）
        accent: {
          light: '#F5F7FF',
          DEFAULT: '#165DFF',
          dark: '#0E42C2',
        },
      },
    },
  },
  plugins: [],
}

export default config

3. 保存文件后，Next.js会自动热更新样式，你可以直接在组件中使用自定义颜色类，比如：

<div className="bg-primary text-white p-4">
  这是自定义主色背景
</div>
<div className="text-accent-dark">
  这是自定义深色强调文本
</div>

关于postcss.config.mjs的说明 #

这个文件的作用是告诉PostCSS要启用哪些插件（比如Tailwind CSS、Autoprefixer），默认配置通常如下，不需要做任何修改：

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

export default config

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