Next.js集成Tailwind CSS 4.0部分样式不生效问题求助

在集成Tailwind CSS 4.0的Next.js 15项目中遇到样式生效异常：

• 当app目录放在项目根目录时，text-red-400、bg-red-400等颜色/背景样式完全不生效，但text-2xl这类排版样式正常工作；
• 将app目录移至src文件夹后，文本颜色、字号、字体样式恢复正常，但bg-red-400、border-4等背景、边框样式仍无法生效。

问题出在Tailwind CSS 4.0的配置扫描范围和自定义@theme规则的冲突，按以下步骤修复：

1. 添加Tailwind配置文件指定扫描路径 #

在项目根目录创建tailwind.config.ts，明确Tailwind需要扫描的所有组件文件路径，确保不会漏生成样式：

import type { Config } from "tailwindcss";

export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}", // 适配根目录app结构
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}", // 适配src下app结构
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

2. 修复global.css中的@theme规则 #

Tailwind CSS 4.0中自定义主题变量时，不要覆盖默认的字体变量，否则会干扰背景、边框等工具类的生成逻辑。修改后的global.css：

@import "tailwindcss";

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

/* 仅保留自定义颜色变量，移除对默认字体变量的覆盖 */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

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

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

3. 优化PostCSS配置（可选） #

在postcss.config.mjs中显式调用Tailwind插件，确保Turbopack能正确处理：

import tailwindcss from "@tailwindcss/postcss";

const config = {
  plugins: [tailwindcss()],
};

export default config;

4. 确认tsconfig的文件包含范围 #

确保tsconfig.json的include字段覆盖src目录下的所有文件（针对src/app结构）：

"include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", ".next/types/**/*.ts"],

问题根源说明 #

• Tailwind CSS 4.0默认扫描根目录的app、components文件夹，若app在src下且未配置扫描路径，部分样式会被遗漏；
• 自定义@theme规则中覆盖了--font-sans、--font-mono默认变量，破坏了Tailwind工具类依赖的主题变量链，导致背景、边框等样式无法生成。

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