NextJSにおけるTailwindの操作

NextJSでは、Reactとよく一緒に使用される CSSフレームワークTailwindをスタイリングに使用できます。その使用方法を見てみましょう。

Tailwindのスタイルを動作させるには、 2つのファイルが必要です: tailwind.config.js と postcss.config.jsです。プロジェクトのインストール時に「Tailwindスタイルを使用する」オプションを選択したため、これらのファイルは既にプロジェクト内で生成されており、そのルートディレクトリにあります。これらのファイルがない場合は、公式ドキュメントに従って Tailwindをインストールする必要があります。

それでは、Tailwindスタイルを使って段落のテキストに太字のスタイルと黄色の色を追加してみましょう。Tailwind CSSでは、色のクラスで使用される数値は色の強度または色調を示します。これらの数値は50から 900まで変化します。テキストの段落には中間の色調を選びましょう:

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

あなたのプロジェクトでTailwindスタイルを試してみてください。