Next.js(TailwindCSS入り)プロジェクトを最速で立ち上げる手法

サクッと用意出来てコーディングに集中出来るように現時点での最速構築方法をまとめています。
各バージョンによってはインストール方法が変わる可能性がありますので要注意してください。

環境バージョン
macOSv12.3.1
Node.jsv14.18.1
yarnv1.22.18
Reactv18.1.0
Next.jsv12.1.6
TailwindCSSv3.0.24

TailwindCSS公式ではnpmによるインストールを推奨していますが、あえてyarnで進めます。

インストール - Tailwind CSS
TailwindCSSをインストールおよび構成するためのクイックスタートガイド。

Terminal

生成されたtailwind.config.jsにテンプレートパスの設定を追加

tailwind.config.js

CSSにTailwindのディレクティブを追加

globals.css

簡単ですね、以上です。

タイトルとURLをコピーしました