Werk met Tailwind in NextJS

In NextJS kan jy die CSS raamwerk Tailwind gebruik vir stilisering, wat gereeld saam met React gebruik word. Kom ons kyk hoe om dit te gebruik.

Om met Tailwind style te werk, is twee lêers nodig: tailwind.config.js en postcss.config.js. Aangesien ons tydens die installering van die projek die opsie gekies het om "Tailwind style te gebruik", is hierdie lêers reeds in ons projek gegenereer en is in die wortel daarvan. As daar nie sulke lêers is nie, moet jy Tailwind installeer volgens die amptelike dokumentasie.

Kom ons voeg 'n vetdruk fontgewig en 'n geel kleur by die teks van die paragraaf deur Tailwind style te gebruik. In Tailwind CSS dui die getalle, wat in klasse vir kleure gebruik word, die intensiteit of skakering van die kleur aan. Hierdie getalle wissel van 50 tot 900. Vir die paragraafteks kies ons 'n medium skakering:

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

Probeer om Tailwind style in jou projek te gebruik.