Tailwindin käyttö NextJS:ssä

NextJS:ssä tyylittelyyn voit käyttää CSS-frameworkia Tailwind, jota käytetään usein yhdessä Reactin kanssa. Katsotaan kuinka sitä käytetään.

Tailwind-tyylejä varten tarvitaan kaksi tiedostoa: tailwind.config.js ja postcss.config.js. Koska asentaessamme projektia valitsimme kohdan "käytä Tailwind-tyylejä", nämä tiedostot on jo generoitu projektiimme ja ne sijaitsevat sen juuressa. Jos näitä tiedostoja ei ole, sinun on asennettava Tailwind virallisen dokumentaation mukaisesti.

Lisätään lihavoitu tyyli ja keltainen väri kappaleen tekstille käyttämällä Tailwind-tyylejä. Tailwind CSS:ssä numerot, jotka käytetään väreihin liittyvissä luokissa, ilmaisevat värin intensiteettiä tai sävyä. Nämä numerot vaihtelevat 50:stä 900:ään. Valitaan tekstille keskitasoinen sävy:

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