Arbejde med Tailwind i NextJS

I NextJS kan du bruge CSS-frameworket Tailwind til styling, som ofte bruges sammen med React. Lad os se, hvordan man bruger det.

For at arbejde med Tailwind-styles kræves to filer: tailwind.config.js og postcss.config.js. Da vi under installationen af projektet valgte punktet "brug Tailwind-styles", er disse filer allerede genereret i vores projekt og placeret i dets rod. Hvis sådanne filer ikke findes, skal du installere Tailwind i henhold til officiel dokumentation.

Lad os tilføje fed skriftstyrke og gul farve til teksten fra afsnittet ved hjælp af Tailwind-styles. I Tailwind CSS angiver tal, der bruges i klasser til farver, farveintensiteten eller -nuancen. Disse tal spænder fra 50 til 900. Til afsnitsteksten vælger vi en mellem nuance:

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

Prøv at bruge Tailwind-styles i dit projekt.