Tailwind CSS入門

WEB+DB PRESS Vol.133の特集で学んだことをメモ。

https://amzn.asia/d/eUp4N1q

導入することで得られるメリット

クラス名を考えなくていい

クラス名考えるのって本当にめんどい。ちょっとスタイル当てたいだけなのに。名前をつける活動に対する対価が見合ってない気がする。

HTMLとCSSファイルの行き来がなくなることによる認知負荷軽減と効率アップ

注意を向ける対象を頻繁に切り替えることは認知負荷が高い活動なのである。メタ認知しないと意外に気が付かないもの。また、切り替え作業に伴う一連の作業は何百回と行う。非効率である。

影響範囲が明確になる

HTMLに直接当てる形になるのでそいつに対してしか影響しない。影響範囲という概念がそもそもない。

ガイドライン不要

昔、かなり長いコーディングガイドラインを渡されてとても萎えた経験がある。これをシステムで確認してくれる仕組みを作っているのならいいが、あなたがこれを確認しながらコーディングをしなさいというものだったので、毎回書いたら違反していないかを見ないといけなかった。非効率すぎ。

実際にAstroで使って感じたこと

早速利用した。コンポーネント化するには小さい単位のHTMLをどう扱うかが分からなかった。例えばform内のinputなど。ユーティリティーファーストという考え方に則れば、この時点でコンポーネント化しても良さそうだが、キリがなく、最後の方は面倒に感じてしまっていた。このようになってしまった。

<label class="2xl:flex 2xl:items-center 2xl:gap-5 block mb-7">
    <span class="block pb-1 2xl:pb-0 2xl:min-w-[200px]">お名前（必須）</span>
    <input type="text" name="お名前" required="required" class="mt-1 block w-full border-[#E5E2E0] 2xl:flex-auto 2xl:max-w-[520px]"/>
</label>
<label class="2xl:flex 2xl:items-center 2xl:gap-5 block mb-7">
    <span class="block pb-1 2xl:pb-0 2xl:min-w-[200px]">メールアドレス（必須）</span>
    <input type="email" name="メールアドレス" required="required" class="mt-1 block w-full border-[#E5E2E0]" placeholder="info@example.com" />
</label>

inputなど同じCSSが当たってる。変更に弱い。従来のやり方では、クラス当てるだけでお終い。Tailwindだと、これをさらに共通化せねばならんので、コストが増えているように感じる。

ユーティリティーファーストとは

ユーティリティーファーストというのは、最初はユーティリティークラスで作り、本当に再利用する必要が生じてから抽出すべし、という考え方。この目的は早すぎる最適化を避けるためである。

早すぎる最適化は何がまずいのか

従来の方法では、全てが共通化されたもの、つまりコンポーネントとなってしまう。

この本では上記のように述べられていた。クラス名をつけるということは、対象を抽象化しており、これってコンポーネント化しているってことだよねということだと解釈した。

後から「これ共通化できるやん」となっても、クラス名やスタイルが最適化されているために、抽出しづらい。同じCSSを当てようにも名前をより抽象化したり、元のCSSに変更を加えると共通して利用する別の箇所に影響を与える恐れがある。

Tailwind CSSであれば、HTMLをパーツとして抽出するだけで良い。実際この体験は結構良かった。このような共通化への考え方がTailwind CSSのモチベーションであると理解できた。