Next.js 15项目中Tailwind CSS自定义及标准颜色失效问题

问题核心：自定义颜色与Tailwind预设颜色（如bg-red-500）均无法生效，本质是Tailwind CSS v4未正确编译生成对应样式。以下是针对性修复步骤：

1. 补充PostCSS配置文件 #

Tailwind CSS v4依赖PostCSS处理样式规则，你需要在项目根目录创建postcss.config.js，内容如下：

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

缺少该配置时，Tailwind无法解析@import "tailwindcss"和@theme语法，自然不会生成对应的样式类。

2. 修正自定义颜色定义方式 #

Tailwind v4推荐在配置文件中统一管理自定义颜色，既规范又避免冲突。修改tailwind.config.ts：

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./app/**/*.{ts,tsx}",
    "./app/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'suki-light': '#f6fdff',
      },
    },
  },
  plugins: [],
};
export default config;

同时删除globals.css中单独的@theme { --colors-suki-light: #f6fdff; }块，避免重复定义。

3. 简化并修正globals.css中的@theme规则 #

Tailwind v4中@theme内的颜色变量前缀为--color-而非--colors-，且建议将所有自定义主题规则集中在一个@theme块内。修改后的globals.css：

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

4. 重启开发服务 #

修改配置文件后，必须重启Next.js开发服务器，确保新配置生效。

验证 #

完成以上步骤后，重新使用bg-suki-light或bg-red-500类，背景色应正常生效。若仍有问题，可检查：

• content配置是否覆盖了所有使用Tailwind类的文件路径
• tailwindcss与@tailwindcss/postcss版本是否均为v4.x，确保依赖版本一致

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