Travailler avec Tailwind dans NextJS

Dans NextJS, pour la stylisation, on peut utiliser le framework CSS Tailwind, qui est souvent utilisé avec React. Voyons comment l'utiliser.

Pour travailler avec les styles Tailwind, deux fichiers sont nécessaires : tailwind.config.js et postcss.config.js. Étant donné que lors de l'installation du projet, nous avons choisi l'option "utiliser les styles Tailwind", ces fichiers ont déjà été générés dans notre projet et se trouvent à sa racine. Si ces fichiers n'existent pas, vous devez installer Tailwind conformément à la documentation officielle.

Ajoutons une graisse demi-gras et une couleur jaune au texte du paragraphe en utilisant les styles Tailwind. Dans Tailwind CSS, les nombres, utilisés dans les classes pour les couleurs, indiquent l'intensité ou la teinte de la couleur. Ces nombres varient de 50 à 900. Pour le texte du paragraphe, choisissons une teinte moyenne :

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