Início / user-10921379

ryuma's questions

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

Cores personalizadas e cores padrão do Tailwind CSS não funcionam no projeto Next.js 15. Estou trabalhando em um projeto Next.js 15 com Tailwind CSS v4 e estou com problemas para fazer as cores de fundo do Tailwind funcionarem, tanto as personalizadas quanto as padrão, como bg-red-500.

O que eu tentei

Eu defini uma cor personalizada no meu globals.css:

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

E estou tentando usá-lo no meu componente:

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

Mas a cor de fundo não está sendo aplicada. As cores padrão do Tailwind bg-red-500também não estão funcionando.

Minha configuração

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;

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;
}

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

Dependências do 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"
}

Qualquer ajuda seria muito apreciada, pois estou preso nisso há horas.

next.js