Arbete med Tailwind i NextJS

I NextJS kan du använda CSS-ramverket Tailwind för styling, som ofta används tillsammans med React. Låt oss titta på hur man använder det.

För att arbeta med Tailwind-stilar behövs två filer: tailwind.config.js och postcss.config.js. Eftersom vi vid installationen av projektet valde alternativet "använd Tailwind-stilar", har dessa filer redan genererats i vårt projekt och finns i dess rot. Om sådana filer inte finns måste du installera Tailwind enligt officiell dokumentation.

Låt oss lägga till fetstil och gul färg på texten i stycket med hjälp av Tailwind-stilar. I Tailwind CSS representerar siffror, som används i färgklasser, färgintensitet eller nyans. Dessa siffror varierar från 50 till 900. För styckets text väljer vi en medium nyans:

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