主页 / user-17911990

Amritanshu SINGH's questions

Martin Hope
Amritanshu SINGH
Asked: 2025-04-16 23:07:20 +0800 CST
  • 6

我正在使用 Next.js（v15.3.0 - Pages Router）和 Tailwind CSS（v4.1.4）设置一个新项目，但遇到了一个持续存在的构建问题，即无法识别 Tailwind 实用程序类。

核心问题：

Next.js 开发服务器（next dev）编译失败，抛出如下错误：

Error: Cannot apply unknown utility class: bg-gray-50

最初，这个问题发生在我的 中bg-gray-50使用的默认 Tailwind 类（ ）上。在尝试了不同的配置（例如使用）后，错误转移到了我的自定义主题颜色上：@applyglobals.cssglobals.css@import "tailwindcss/preflight"; @reference "tailwindcss/theme.css";

Error: Cannot apply unknown utility class: text-primary-600

theme()当尝试直接在中使用该函数时@layer base，我得到：

Error: Could not resolve value for theme function: theme(colors.gray.50).

本质上，PostCSS/Tailwind 构建过程似乎无法在 CSS 构建管道中正确识别或应用任何Tailwind 实用程序类。

相关版本：

  • Next.js： 15.3.0（使用 Pages 路由器）
  • Tailwind CSS： 4.1.4
  • @tailwindcss/postcss： 4.1.4
  • Node.js： v20.x

配置文件：

tailwind.config.js（简化尝试）：

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: { // No 'extend'
    fontFamily: {
      sans: ['Inter', ...defaultTheme.fontFamily.sans],
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray, // Explicitly included
      red: colors.red,
      green: colors.green,
      primary: { // My custom color
        DEFAULT: '#2563EB',
        // ... other shades 50-950
        600: '#2563EB',
        700: '#1D4ED8',
      },
      secondary: { /* ... custom secondary color ... */ },
    },
     ringOffsetColor: {
        DEFAULT: '#ffffff',
     },
  },
  plugins: [],
};

postcss.config.js：

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {}, // Using the v4 specific plugin
    autoprefixer: {},
  },
};

src/styles/globals.css（最新尝试）：

/* src/styles/globals.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@import "tailwindcss/preflight";
@tailwind theme;
@tailwind utilities;

@layer base {
    html {
        font-family: 'Inter', sans-serif;
        scroll-behavior: smooth;
    }

    body {
        @apply bg-gray-50 text-gray-900 antialiased;
    }

    a {
        @apply text-primary-600 hover:text-primary-700 transition-colors duration-150;
    }
}

尝试的故障排除步骤（未成功）：

  • 完成全新安装：多次删除.next、node_modules并package-lock.json重新运行npm install。
  • 已验证的配置路径：检查和中的content路径。tailwind.config.jsbaseUrltsconfig.json
  • 简化tailwind.config.js：尝试删除theme.extend，直接在下定义颜色theme。
  • 明确的默认颜色：明确添加gray: colors.gray到red: colors.red配置中等。
  • 不同的globals.css指令：
    • 尝试了标准 v3 @tailwind base; @tailwind components; @tailwind utilities;。
    • 尝试过@import "tailwindcss/preflight"; @reference "tailwindcss/theme.css"; @tailwind utilities;（这修复了使用时的默认类错误但没有修复自定义错误@apply）。
    • 已尝试@import "tailwindcss/preflight"; @tailwind theme; @tailwind utilities;（当前）。
  • @apply与theme()：@layer base尝试使用其中的每一种方法globals.css。@apply首先失败，然后theme()也失败。
  • postcss.config.js变化：尝试使用tailwindcss: {}而不是@tailwindcss/postcss: {}。

尽管采取了这些步骤，构建仍然持续失败，无法识别或处理 CSS 中引用的 Tailwind 工具类（尤其是在 中globals.css）。直接在 JSX 元素上使用的标准工具类（例如<div className="p-4 bg-primary-500">）也无法正确应用样式，因为底层 CSS 生成不正确。

有人在这个特定的堆栈（Next.js 15 / Tailwind 4 / Pages Router）上遇到过类似的问题吗？是什么原因导致了 Next.js 构建过程中 Tailwind 的处理出现根本性故障？我可能遗漏了哪些配置细节？

提前感谢您的任何见解！

css