2025年12月01日
｜技術
Tailwind CSSの複雑なGridレイアウトはScoped Styleで書くと良いかも
Tailwind CSSで複雑なGridレイアウトを書こうとして、クラス名が長くなりすぎて困ったことはありませんか？
私は結構あります。
具体的にはgrid-template-(columns|rows)でauto-fitやminmax()を組み合わせたり、grid-template-areasを使いたいときなどです。
一度目に書く分にはまだ大丈夫ですが、後から読み解いたり継続的にメンテナンスをするのはかなり厳しいかも……と感じています。
そんな中、複雑なレイアウトだけはScoped Styleで書くというアプローチを試してみたので、その方法を紹介します。
