NextJSにおけるTailwindの操作

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

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

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

app/test/page.jsxexport default function Test() {
  return <p className="font-bold text-yellow-500">
    text text text
  </p>;
}