はじめに アイディオットDX開発部の岩澤です。 先日、TailwindCSS v3.4がリリースされました。 個人的に今回のリリース内容が激アツだったのですが、まだ内容を追えてない方や、今回の変更の何が嬉しいのかわからない方向けに、サクッと解説していきたいと思います。 h-dvh h-dvhというclassが指定できるようになりました。 たとえば以下のように、スクロールするとアドレスバーが縮小する場合など、動的にかわるビューポートの高さにあわせて、要素の高さも動的にビューポートの高さにあわせられるようになります。 これを実現するために、今まではカスタムのユーティリティを作成してましたが、その必要がなくなりました。 あとは、個人的にはあまり使わなそうだなと思いましたが、lvh、svhというユーティリティクラスも追加されています。 has :has()はCSSの中でもかなり強力な擬似クラスに分