Lavorare con Tailwind in NextJS

In NextJS per la stilizzazione puoi utilizzare il framework CSS Tailwind, che è spesso usato insieme a React. Diamo un'occhiata a come usarlo.

Per lavorare con gli stili Tailwind sono necessari due file: tailwind.config.js e postcss.config.js. Dato che durante l'installazione del progetto è stata selezionata l'opzione "utilizzare gli stili Tailwind", questi file sono già stati generati nel nostro progetto e si trovano nella sua root. Se questi file non esistono, è necessario installare Tailwind secondo la documentazione ufficiale.

Aggiungiamo lo stile grassetto e il colore giallo al testo del paragrafo utilizzando gli stili Tailwind. In Tailwind CSS i numeri, usati nelle classi per i colori, indicano l'intensità o la tonalità del colore. Questi numeri variano da 50 a 900. Per il testo del paragrafo scegliamo una tonalità media:

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