【初心者向け】TailwindCSS ver3.0の導入について #Next.js

背景

next.jsとTailwindCSSの組み合わせを試す機会があったので以下を備忘に残します。
基本、公式に記載のドキュメント通りで詰まることはないはずなのですが、公式が言っていることもいまいちわからない初心者向けの記事です。

【概要】ざっくりいうと以下が要点

4つのインストールの方法があるよ
Next.jsの場合は、Framework Guidesから行うが簡単だよ。CLIでインストールすると何を行っているか理解しやすく勉強になるよ
ver2.0ではjust-in-time(JIT)モードはオプションだったけど、3.0ではJITがデフォルトになっているよ。3.0は最近リリースされたので多くのネットの情報は古くなっているので注意が必要だよ

4つのインストール方法の紹介

公式(https://tailwindcss.com/docs/installation)を参照すると、4つの方法がある。

CLIを使ってインストール　→動きを知るという意味ではわかりやすい
PostCSSのプラグインとしてTailwindCSSをインストール　→1,3,4どれも当てはまらないときにどうぞ
Next.jsなど有名どころのフレームワークのガイドに従ってインストール　→パフォ的にはこっちが実用的
CDNを使ってインストール　→ちょっとお試ししたいときにどうぞ

4番は、ちょっとお試しで使いたい場合に行う方法で本番環境での使用は非推奨です。

そうなると候補は1～3になるのですが、ここでは１と３の内容をみていきます。

CLIでのインストールの具体的な操作と解説

Tailwind CSSのインストール
ちなみにDのオプションは-save-devのエイリアスです（役割はここでは割愛）

npm install -D tailwindcss
npx tailwindcss init

tailwind.config.jsの追記
content部分に適用するファイルと拡張子を記載します。
src配下のすべてのサブディレクトリのファイルかつ拡張子がhtmlとjsのものに対して、適用させる場合は以下のような記述になります。(ここがいまいち不明な人はワイルドカードでの指定の仕方などをググるとよいでしょう)

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

inputファイルの作成
src/input.cssというファイルを作成し、以下のような記述をします。VSCode上では警告が出るかもしれませんが無視してOKです。気になる人は「PostCSS Language Support」というExtensionを導入することで消せます。

@tailwind base;
@tailwind components;
@tailwind utilities;

適用するCSSファイルのbuild
上記のinput.cssから実際に適用するCSSファイルを作成します。
(以下の例ではdist/output.cssとしていますが、next.jsの場合はpublic配下がよいかも)
そのためのコマンドが以下です。

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

watchのオプションをいれることで、tailwind.config.jsのcontentで指定したソースに変更があった場合自動で再ビルドがかかるようになります（変更をwatchするわけです）

watchしている間は、npm run dev などほかのコマンドは受け付けてくれないので

別のターミナルを起動してそこで実施するとよいでしょう。

※Ver2.0のデフォルトでは、このファイルの容量がとても大きかったのですがjust-in-timeモードがデフォルトになったので必要な量だけをファイルに吐き出してくれるようになりました。

HTMLでstylesheetを適用する
buildされたCSSファイルをHTML上で指定します。

<link href="/dist/output.css" rel="stylesheet">
.
.
.
<div className='text-[#384359] text-left self-center font-bold text-xl'>

以上で終了です。

Next.jsなど有名どころのフレームワークのガイドに従ってインストール（追記）

簡単にNext.jsを例に見ていきます。
といってもやり方はCLIの場合とほとんど変わりません

■PJを作る

npx create-next-app my-project
cd my-project

■必要なライブラリをインストールしてinitでtailwind.config.js and postcss.config.jsを作成する

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.jsは以下のようなイメージ

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

■globals.cssのの用意

@tailwind base;
@tailwind components;
@tailwind utilities;

使い方も役割も一緒

■_app.tsxで読み込む

_app.tsx

import '../styles/globals.css';

あとはnpm run dev　で動かせばOK。
この状態で以下の様に記述をしても随時CSSの変更が反映される。

index.tsx

    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>

その他の注意点

Next.jsを使っている方はインストールするだけなら、3番の「ガイドにしたがってインストール」の方が若干楽かもです（output.cssを作る過程がnpm run devに含まれているだけ)
ただ、内部の動きを理解する意味でもCLIでのインストール手順を理解しておくことをお勧めします。

また、3.0は2021年の12月になってからリリースされたのでネットの情報は微妙に古い可能性があります。ググるときは要注意です。