主页 / user-10921379

ryuma's questions

Martin Hope
ryuma
Asked: 2025-04-26 14:31:36 +0800 CST
  • 6

Tailwind CSS 自定义颜色和标准颜色在 Next.js 15 项目中无法正常工作。我正在使用 Tailwind CSS v4 开发一个 Next.js 15 项目，但在使用任何 Tailwind 背景颜色（包括自定义颜色和标准颜色，例如）时都遇到了问题bg-red-500。

我尝试过的方法

我在 globals.css 中定义了自定义颜色：

@theme {
  --colors-suki-light: #f6fdff;
}

我正尝试在我的组件中使用它：

export default function Home() {
  return <div className="bg-suki-light">aaaaaaaaaaaaaa</div>;
}

但是背景颜色没有应用。标准的 Tailwind 颜色bg-red-500也不起作用。

我的设置

tailwind.config.ts：

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./app/**/*.{ts,tsx}",
    "./app/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
  ],
  plugins: [],
};
export default config;

全局.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;
}

@theme {
  --colors-suki-light: #f6fdff;
}

package.json 依赖项：

"dependencies": {
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "next": "15.3.1"
},
"devDependencies": {
  "typescript": "^5",
  "@types/node": "^20",
  "@types/react": "^19",
  "@types/react-dom": "^19",
  "@tailwindcss/postcss": "^4",
  "tailwindcss": "^4",
  "eslint": "^9",
  "eslint-config-next": "15.3.1",
  "@eslint/eslintrc": "^3"
}

任何帮助都将不胜感激，因为我已经被这个问题困扰了好几个小时。

next.js