Next.js + Tailwind CSSの環境構築

はじめに

みなさんはフロントエンドのフレームワークに何を使いますか？私はNext.jsです。なぜかって？名前がカッコイイからです。この記事ではNext.jsをカッコよく（？）始めるための方法をしたためておきます。

開発環境

• macOS 12.2.1 Monterey
• Next.js
• TailwindCSS
• Visual Studio Code

環境構築

DRFの環境構築同様、初学者向けですが「1行解説」、やっていきます。作業は大きく分けて3ステップです。

ディレクトリ作成（１／３）

1. (l.1)まずはターミナルを開いてデスクトップに移動します。今回はデスクトップにプロジェクトを作成します。
2. (l.2)プロジェクトを入れる箱として、sampleBoxを作成します。名前は何でも大丈夫です。
3. (l.3)作成したsampleBoxに移動します。次のステップではパッケージをインストールします。

Next.jsプロジェクト作成（２／３）

1. (l.1)sampleBox内でNext.jsのプロジェクトを作成します。プロジェクト名をnext_sampleとしていますが、もちろん名前は何でも大丈夫です。
2. (l.2)next_sampleのプロジェクトに移動します。
3. (l.3)続いてnpm installで、TailwindCSSをインストールします。
4. (l.4)それではローカルサーバを立ち上げましょう。すると下の画像のような画面が表示され一旦準備が整いました。ワクワクしてきましたね。 ※なお、画像ではローカルサーバーのURLのポート番号が3001となっていますが、通常は3000となっているはずです。3000というポートが別で立ち上がっている場合に、Next.jsではその次のポートで立ち上げてくれます。
5. (l.5~6)続いてNext.js側でTailwindCSSの設定を行います。TailwindCSSのHPからNext.jsにおける設定方法を確認し、追加でプラグインのインストールを実施、初期化をします。

• そして、同ディレクトリにcomponentsフォルダを作成すると、最終的には下のようなディレクトリ構成となっているはずです。

TailwindCSS設定（３／３）

ステップ2までで、ディレクトリ構成に関わる設定を一通り終えました。ここからはTailwindCSSを利用するために各ファイル内で必要な設定をします。基本的には同ページ内の指示通り実施するだけですが。

Tailwind.config.css

1. (l.3~6)同ページの指示通り、contentを一部書き換えます。

global.css

1. (l.1~3)プロジェクト作成時に記載してあった内容を全て上書きする形でコピペするだけです。

まとめ・参考

今回TailwindCSSを利用しての環境構築を解説しましたがもちろん利用は任意です。ただこのようなCSSフレームワークを使うとCSS設計が不要と言う点でページ作成が楽になると思うのでおすすめです。最初は記述方法等で苦労するかもしれませんが、検索するとチートシートなんかも出てくるので、参考にしてみると良いかもしれません。

参考

• Installation - Tailwind CSS
• Tailwind CSS Cheat Sheet