Início / coding / Perguntas / 79593641
Accepted
ryuma
Asked: 2025-04-26 14:31:36 +0800 CST

Cores personalizadas e cores padrão do Tailwind CSS não funcionam no projeto Next.js 15

  • 772

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

1 respostas

  1. Best Answer

    A partir do TailwindCSS v4, não há tailwind.config.jsmais necessidade de um arquivo; ele se tornou obsoleto. Em vez disso, foi introduzida uma abordagem de configuração CSS-first. Vejo que você já está aplicando isso ao seu globals.cssarquivo usando a @themediretiva.

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

    O motivo disso é que você declarou incorretamente o namespace de cores no @theme. Você pode encontrar os namespaces disponíveis aqui:

    A maneira correta de declarar a cor é usando colorem vez de colors:

    @import "tailwindcss";

@theme {
  --color-suki-light: #f6fdff; /* --color-... instead of --colors-... */
}

    Extra: Recomenda-se colocar os estilos padrão em @layer base, pois unlayeredo estilo do corpo atual é mais forte que o do TailwindCSS (desde a versão 4, camadas são usadas). Dessa forma, mais tarde, você não terá problemas ao tentar substituir o corpo ou outros estilos de classe se continuar a declará-los sem uma camada.

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

@layer base {
  body {
    background: var(--background);
    color: var(--foreground);
    font-family: Arial, Helvetica, sans-serif;
  }
}
    • 1

relate perguntas