こんにちは。最近久々にTailwindを利用したら、結構導入方法や使い方が変わっていたのでここでまとめようと思います。
今回は前提となるライブラリは0の状態で、Tailwind単品での場合を考えます。Viteを使う場合やNext.js, Astroなどと併用する場合は公式の情報を参考にしてみてください。
参考：https://tailwindcss.com/docs/installation
Tailwind CSS 4系と3系の主な違い
Tailwind CSS 4系では設定ファイル（tailwind.config.js）による設定方法から「CSS First Configuration」というCSS内で設定する方法へ大きく変更されました。
次のような書き方になります。
@import "tailwindcss";
// ここから設定
@theme {
--breakpoint-md: 961px;
}個人的にはこちらの方が設定の文面がすっきりしていて読みやすいし、あっちこっちのファイルを見なくて良いので好きですね。
npmでインストール
では導入と使い方を見ていきましょう。
まずはnpmパッケージをインストールしましょう。単品で使う場合はTailwind CLIを用います。
npm install tailwindcss @tailwindcss/clinpmプロジェクトを作っていない場合はnpm initを先に実行しておいてください。
実行環境の準備
実行コマンドは次のとおりです。
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watchベースとなるファイル（input.css）と、出力先のファイル（output.css）を配置しておいてください。
input.cssには次の1行を追加してください。
@import "tailwindcss";このコマンドはnpm scriptsに登録しておいてもいいでしょう。
"scripts": {
"build": "tailwindcss -i ./src/input.css -o ./src/output.css --watch"
},–watchオプションがありますので、このままでもプロジェクト内のファイルを自動で認識して変更のたびに更新されますが、特定のファイルだけをwatchするなどの設定をした方がおすすめです。
設定で微調整する
前述の通り4系はtailwind.config.jsではなくinput.cssに設定を書きます。例えばブレイクポイントの設定は次のように書きます。
@import "tailwindcss";
@theme {
--breakpoint-md: 961px;
}これは従来のtailwind.config.jsにおける次の書き方に相当します。
module.exports = {
theme: {
extend: {
screens: {
md: "961px",
},
},
},
}extend相当なので、他のキーワード（smやxl）の設定は変わらず使用することができます。
個人的にはこのブレイクポイントの変更と監視対象ファイルの設定くらいしかやらないので、その2つを紹介します。
ブレイクポイントの変更
@theme内に以下の書き方で指定します。簡単ですね。
@theme {
--breakpoint-sm: 480px;
--breakpoint-md: 768px;
--breakpoint-lg: 976px;
--breakpoint-xl: 1440px;
}監視対象ファイルの設定
tailwindはデフォルトで以下のファイル以外の全ファイルをスキャンします。
.gitignoreファイル内にあるファイルnode_modulesディレクトリ内のファイル- 画像、動画、zipファイルなどのバイナリファイル
- CSSファイル
- 一般的なパッケージマネージャーのロックファイル（package-lock.jsonなど）
これだと多すぎる場合は特定のものだけ読み込んだり、逆に上記のファイル群で読み込んで欲しいものがあれば明示的に登録することができます。次の例を見てください。
// 特定のものだけを読み込む
@import "tailwindcss" source(none); // 自動スキャンを停止
@source "./../pages"; // ディレクトリ単位指定
@source "./../index.html"; // ファイル指定
// 特定のものを無視する
@source not "./../src/components/legacy";特定のものだけを読み込むには、まず自動スキャンを止めてからリソースを指定しましょう。また特定のディレクトリやファイルを無視することもできます。
@sourceで指定したファイルは上記の無視されるファイル群だったとしても読み込まれます。
パスはinput.cssからの相対パスなので、それが煩わしい場合はベースパスを設定することもできます。
@import "tailwindcss" source("./../../src");まとめ
ということでTailwind CSS v4の導入、設定ガイドでした。久しぶりに使うと設定方法が大きく変わっていて混乱しましたが、慣れてしまえばこちらの方が良いですね。ぜひお試しください。
▼ Tailwind CSSが効かない時はこちらをご覧ください
コメント