TailwindCSSのv4のbeta版がドキュメントに公開されました。
内容は非常にボリュームがあるため、全てを覚えるのは難しいですし、重要ではないもの中にはあるのでこれだけ知っておけばとりあえずv4を使えるという内容をお届けしたいと思います。
内容はしまぶーさん(@shimabu_it)が運営されているコミュニティ内で行われた企画をアウトプットしたものになります。
テーマの設定
<div class="text-2xs text-foo-100">hello</div>@theme {
--text-2sx: 10px;
--color-foo-100: oklch(0.99 0 0);
}text-foo-100はTailwindで登録されているユーティリティクラスに存在しませんが、cssファイル内で@theme の中で記述することで登録することができます。
テーマの無効
--color-*: initial;--color-*Tailwindに登録されているcolorクラスを全て無効にする。
テーマの一括無効
--*: initial;全てのユーティリティクラスを無効
ネイティブカスケードレイヤー
@layer base {
ol,
ul,
menu: {
list-style: inside square;
}
}独自のレイヤーからCSSの@layerを内部的に使ってる。
デフォルトのbaseのレイレーを書き換えたい時に使える。
上記のコードではol, ul, menuタグのデフォルトのlist-styleのデフォルトをinsideとsquareaに変更
Arbitrary Valuesの無限化
<div class="z-[9999]"></div>
<div class="z-9999"></div> <!-- v4 -->今まで任意の値を入力する際は括弧をつけて記述していたのがいらなくなりました。
data属性の省略
<div class="data-[selected]:hidden" data-selected>hello</div>
<div class="data-selected:hidden" data-selected>hello</div>元々data属性を指定する際は括弧が必要だったがいらなくなりました。
デフォルト値の変更
@theme {
--spaceing: 0.25rem;
}
⇩
@theme {
--spaceing: 1rem;
}Tailwindに登録されているデフォルトのスタイル値を変更することも可能になりました。
個別のデフォルト値の変更
@theme {
--spaceing-2: 0rem;
}個別のスタイルの変更も可能です。
textareaの高さ自動設定
<textarea class="field-sizing-content w-1/2 outline"></textarea>field-sizing-content を記述することでtextareaで入力した際に自動的に行を追加してくれます。
nth variant
<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>CSSで記述していたnth-childとnth-of-typeが簡単に描けるようになりました。
**で全てを指定
<div class="**:rounded-full">
<div class="grid size-40 place-items-center bg-green-300">
<div class="size-20 bg-green-500"></div>
</div>
</div>アスタリスクを2つ続けて記述することで子孫要素全てに対象のクラスを付与することができます。
1つの場合は子要素のみです。
まとめ
ドキュメントを見るともっとたくさんの変更点がありますが、これさえ知ってればTailwindCSS v4がリリースされても問題ないかと思います。
たくさんの変更点があるということは、多くの人に利用されていると同時に運営の力の入れ具合が伺えるので今後も安泰なのかなと考えています。
上記で書いた内容に誤りがあった際はお問い合わせからご連絡いただけると幸いです。
