Nozo blog

2025-02-05

tailwindcss v4についてまとめる

https://tailwindcss.com/blog/tailwindcss-v4 TailwindCSSのv4がリリースされたので、今回はv4への以降の記録を残そうと思います

v4での変更点のまとめ

  1. パフォーマンスの向上 buildの時間が3.5倍に、
  2. モダンなwebの標準に合わせた モダンなCSSの機能をTailwindでも使えるようになりました
  3. セットアップがシンプルになった
  4. viteプラグイン
  5. 自動でcontentを決定する contentは基本的に設定する必要がなくなり、設定したい倍はcssファイルで@source "../node_modules/@my-company/ui-lib";のように指定する
  6. ビルドインimportのサポート
  7. CSSファイルでの設定 tailwind.config.jsで設定するのではなく、global.cssでテーマなどを設定するようになった
  8. CSSのテーマ変数
  9. 動的な共通の値と変数 grid-cols-15やopacity-100、p-24など好きな数字を指定できるようになった
  10. P3カラーパレットの更新 色を全体的に鮮やかな色に変更したが、v3から以降した人も変化を感じずに使えるようになっているそうです
  11. container queryのサポート @tailwindcss/container-queriesのプラグインが不要になりました
  1. 3D transformerの便利関数の追加 3Dの表現がtailwindでもできるようになりました
  2. グラデーションのAPIの拡張
  3. @starting-styleのサポート
  4. no-*変数の追加
  5. 新しい便利機能と変数の追加

マイグレーションの手順

npx @tailwindcss/upgrade@nextコマンドの実行

なぜgalobal.cssでtailwindのテーマを設定できるようにしたのか？

https://azukiazusa.dev/blog/tailwind-css-v4-css-first-configurations/#%E3%81%AA%E3%81%9C-css-first-configurations-%E3%81%8C%E5%B0%8E%E5%85%A5%E3%81%95%E3%82%8C%E3%81%9F%E3%81%AE%E3%81%8blog 一番しっくり来たのはこの記事の内容でした

Tailwind CSS v4.0 の主な目標は、フレームワークを CSS ネイティブにし、JavaScript ライブラリのように感じさせないようにすることであると述べられています。 すべてのテーマが CSS 変数として出力されるようになったことにより、その他のライブラリとの統合がしやすくなったという利点があります

なるほどなと思いつつも、個人的にはjsで書いたほうが階層分けてかけたのできれいにかけたのにという思いがあります...

デフォルトのborderカラーの変更

今まではborderと指定すると自動でgray.200の色が当たっていたのですが、v4からデフォルトの色は当たらなくなり毎回色を指定する必要があります。 ただ、すべてのborderにカラーを追加するのは大変だと思うので、tailwindcssの公式ドキュメントにborderに色をあてるcssのコードが載っていました

また、いくつかリネームされたクラスネームもあったので書くときに注意しましょう 既存のコードに関してはnpx @tailwindcss/upgrade@nextを実行することで自動で変更されるので、その点は安心です

終わりに

基本的にはnpx @tailwindcss/upgrade@nextコマンドを実行するだけでv4にアップデートできるので、アップデートは簡単に行うことができました。 大きな変更といえばテーマの変更だと思います。 それ以外はTailwindCSSでできることが増えたことが多く、v4を使うことでより便利になると思いました

Thanks for the visit Nozo Blog