Trabalhando com Tailwind no NextJS

No NextJS, para estilização, você pode usar o framework CSS Tailwind, que é frequentemente usado junto com React. Vamos ver como usá-lo.

Para trabalhar com os estilos Tailwind, são necessários dois arquivos: tailwind.config.js e postcss.config.js. Como durante a instalação do projeto selecionamos a opção "usar estilos Tailwind", esses arquivos já foram gerados em nosso projeto e estão localizados em sua raiz. Se esses arquivos não existirem, você precisa instalar o Tailwind de acordo com a documentação oficial.

Vamos adicionar o peso em negrito e a cor amarela ao texto do parágrafo usando os estilos Tailwind. No Tailwind CSS, os números usados nas classes para cores indicam a intensidade ou tonalidade da cor. Esses números variam de 50 a 900. Para o texto do parágrafo, vamos escolher um tom médio:

app/test/page.jsxexport default function Test() {
  return <p className="font-bold text-yellow-500">
    texto texto texto
  </p>;
}