Tailwind CSS v4.0が新しくリリースされ、私がよく触っているReact / Next.js環境での開発体験が大きく向上したので実際に使ってみました。
インポート設定
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";１行にまとめられました。素晴らしい！！
v3.xからのアップデート
$ npx @tailwindcss/upgrade@nextはい、これで終わり。まぁこれはこんなもんか。
テーマカスタマイズ
ちょっと面倒だったテーマのカスタマイズはapp.cssに以下の記述をします。
@theme {
--text-2xs: 10px;
--text-xs: 11px;
}そしてそのカスタマイズしたものを使う時は
<p className="text-2xs">10pxの文字サイズになります</p>
<p className="text-xs">11pxの文字サイズになります</p>こう使います。
あとテーマの初期化はこんな感じに書きます。
@theme {
--font-*: initial;
--*: initial;
}--○○-*:initialt;
と書くとあらかじめテーマで設定されている〇〇に入るプロパティの値を初期化できます。
ちなみに、
–*: initial;
と書くとTailWindCSSの全てのテーマの値を初期化しちゃいます。
arbitary values
[]の間に任意の値を指定して任意のCSS のプロパティ値を利用することができる機能ですね。
v3
<div className="z-[9999]"></div>v4
<div className="z-9999"></div>より直感的になりました。
data 属性
arbitary valuesと同様に[]の記述が消えました。
v3
<div class="opacity-50 data-[selected]:opacity-100" data-selected>v4
<div class="opacity-50 data-selected:opacity-100" data-selected>not-* バリアントとnth-* バリアント
v3
<div class="group-has-[&[data-potato]]:opacity-100">v4
<div class="group-has-data-jabi:opacity-100">
<div class="group-not-has-data-jabi:opacity-100">
[追加バリアント]
<div class="nth-3:underline">…</div>
<div class="nth-last-5:underline">…</div>
<div class="nth-of-type-4:underline">…</div>
<div class="nth-last-of-type-6:underline">…</div>Descendant
<div class="**:data-avatar:rounded-full">
<div>
<img src="…" data-avatar />
</div>これでdata-avatar があるimg タグに rounded-full が適用されます。
公式ドキュメント
Tailwind CSS v4.0 Beta - Tailwind CSS
Preview what's coming in the next versio...
tailwindcss.com
だいぶ大きな変更・追加になりましたね。移行コストも馬鹿にならないので、新規プロジェクトでは導入していって既存プロジェクトの時は要検討になりそう。
