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:

export default function Test() {
	return <p className="font-bold text-yellow-500">
		text text text
	</p>;
}

Försök att använda Tailwind-stilar i ditt projekt.