遅ればせながらこの前の年末年始に Tailwind CSS と Chakra UI を触った。(月並みな感想だが) utility-first CSS は書きやすい一方、前者は class
に書かれる多くのユーティリティによりノイズが多く見え、後者は別の機能が載りすぎて too much という印象を受けた。これらを眺めていると、全てのスタイルを class
や Props に直接は書かなくても utility-first CSS の利点を生かせるのではないかと思い始めた。
この記事では、Tailwind CSS との互換機能を持つ Windi CSS[1] を利用しつつ、utility-first CSS におけるノイズの少ない表記法として、配置用ユーティリティだけ使う場合の例を示す。