Início / coding / Perguntas / 79557921
Accepted
elham rajaee
Asked: 2025-04-06 15:35:15 +0800 CST

Como posso adicionar cores personalizadas ao meu projeto Tailwind na versão mais recente do Next.js usando postcss.config.mjs?

  • 772

Estou usando a versão mais recente do Next.js (com o App Router e o TypeScript) e notei que meu projeto usa um arquivo postcss.config.mjs em vez do postcss.config.js usual.

Quero adicionar cores personalizadas à minha configuração Tailwind CSS, mas não tenho certeza de como configurá-lo corretamente nesta configuração. Preciso modificar postcss.config.mjs para adicionar cores personalizadas? Ou há um arquivo diferente que eu deva usar?

next.js

2 respostas

  1. Best Answer

    Há um arquivo diferente que você deve usar. No mesmo arquivo CSS que você tem @import "tailwindcss";, deve adicionar um @themebloco com variáveis ​​de tema que definem sua cor. Por exemplo, para definir uma cor chamada mint-50, você teria em seu arquivo CSS:

    @import "tailwindcss";

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
}

    Veja a documentação das variáveis ​​do tema para mais detalhes.

    • 0

  2. postcss.config.mjsO arquivo é principalmente para plugins PostCSS, incluindo o próprio Tailwind CSS. Você normalmente não adiciona definições de cores diretamente lá. A configuração do Tailwind é manipulada dentro de tailwind.config.jsou tailwind.config.ts, pelo menos até onde eu sei.

    Se eu fosse você, criaria tailwind.config.jsou tailwind.config.tsarquivaria na raiz do projeto.

    • 0

relate perguntas