Werken met Tailwind in NextJS

In NextJS kan voor styling het CSS-framework Tailwind worden gebruikt, dat vaak samen met React wordt gebruikt. Laten we eens kijken hoe je het gebruikt.

Voor het werken met Tailwind zijn twee bestanden nodig: tailwind.config.js en postcss.config.js. Omdat tijdens de installatie van het project door ons de optie "Tailwind styling gebruiken" was geselecteerd, zijn deze bestanden reeds gegenereerd in ons project en bevinden zich in de root. Als deze bestanden er niet zijn, moet je Tailwind installeren volgens de officiële documentatie.

Laten we een vetgedrukt lettertype en een gele kleur toevoegen aan de tekst uit de alinea met Tailwind stijlen. In Tailwind CSS geven de getallen, gebruikt in de klassen voor kleuren, de intensiteit of tint van de kleur aan. Deze getallen variëren van 50 tot 900. Voor de alineatekst kiezen we een medium tint:

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

Probeer Tailwind stijlen in je project te gebruiken.