O Next.js tem o hot reload maravilhoso que atualiza a tela na hora quando mexemos nas pastas pages ou components. Porém, quando nós alteramos arquivos estruturais que ficam na raiz do projeto (como o tailwind.config.js), o servidor de desenvolvimento muitas vezes não percebe a mudança, pois ele só lê esse arquivo na hora do build inicial.
Para a nova cor funcionar, você precisa "reiniciar o motor":
Vá no terminal onde o seu projeto está rodando.
Pressione Ctrl + C para parar o servidor (se perguntar se deseja finalizar, digite S e dê Enter).
Rode o comando npm run dev (ou yarn dev) novamente
Dê um F5 no navegador e a cor vai aparecer!
Sugestão para a equipe Alura:
Fica a sugestão para a edição ou para as próximas aulas de colocar um aviso em texto ou um comentário do instrutor sobre essa necessidade de reiniciar o servidor ao mexer nos arquivos de configuração raiz. Para quem é totalmente iniciante e ainda não tem essa malícia de ambiente, parece que o código está errado e pode gerar bastante frustração! kkkkk
Espero que ajude alguém! Bons estudos para nós.
[EDIT IMPORTANTE] Para quem criou o projeto recentemente (2025 em diante):
Pessoal, um detalhe crucial que descobri logo depois de postar: se você rodou o create-next-app agora, o seu projeto instalou o Tailwind v4, enquanto o curso usa o v3.
A versão 4 aposentou o arquivo tailwind.config.js por padrão. Então, mesmo reiniciando o servidor, as cores que o professor ensina a colocar lá não vão funcionar!
Para ativar o "modo de compatibilidade" e conseguir acompanhar o curso perfeitamente, você precisa fazer o seguinte:
Vá no arquivo styles/globals.css.
Apague tudo que está lá dentro (que é a estrutura nova do v4).
Cole apenas estas duas linhas:
CSS
@import "tailwindcss";
@config "../tailwind.config.js";
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!