Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

2021 年 1 月現在、一番熱い CSS フレームワークということで興味を持った。ソースは The State of CSS 2020: CSS Frameworks 。

クラスを指定してスタイルを適用していく。公式サイトのトップにあるデモを見るとどういうものかの理解が早い

React コンポーネントとスタイル

SASS

React コンポーネントをファイルで 1 対 1 対応させてスタイルを当てるなどしていた。

今までの CSS のパラダイムからの学習コストが低くて済んだり、BEM みたいな既存のプラクティスがそのまま使えたので違和感なく使えるのが良かった。

運用してみると、 jsx/tsx - scss ファイル間の行き来がめんどくさいと感じることが多くなっていた。

CSS in JS

ということでコンポーネントとスタイルが 1 つのファイルに収まった。 jsx/tsx ファイルに文書構造とロジックとスタイルが大集合。 View とロジックを同じファイルに置くように、View とスタイルも同じファイルに置いてしまう。

コンポーネントとスタイルのファイル間の移動はなくなりシンプルになったが、複雑なコンポーネントになるとスタイルの部分とコンポーネントの部分でそれぞれ 1 画面くらいのコード量になり、ファイル間の移動とそんなに変わらんなーという気持ちにはなった。

同じファイルに閉じているというメリットはあるので良くはなっているし、そういうのはコンポーネントを分割すればいいのかもしれないが。

Tailwind

誰もが持っていたスタイルを当てたいのであって CSS 書きたいのではないという不満を解消するために吹いてきた追い風、それが Tailwind CSS。知らんけど。

marginTop: theme.spacing(2) という CSS 書いてスタイルを当ててたのが class="mt-2" で済む体験は確かに気持ちよい。

スタイルを当てるのが、「こういう CSS を書きたい」を Tailwind のクラスに翻訳してクラスに指定するという作業になる。

このクラスへの翻訳という学習コストを支払い終えるとスタイルを当てるコストが小さくなりそう。

コンポーネントファイルに長めに記述されてたスタイルが記述量を減らして className に収まる様は見てて面白い。

Cons

プロトタイピング

スタイルを当てるコストが減るだけでコンポーネントは用意されていないため、爆速プロトタイピングには不向き。

PoC のためのプロトタイピングだったら Material UI など使い慣れたライブラリを使えばモーダルダイアログなどの絶対に必要なコンポーネントがシュッと使えます。

Tailwind UI - Official Tailwind CSS Components で買えばいいという話もある。

まとめ

当てたいスタイルを Tailwind でどう書くかを覚えてしまえばスタイルを当てるコストが相当小さくなりそうな雰囲気がある。

チームで導入するには学習コストとの比較が必要なのでしばらく運用してみてメリットを検証しないと導入は厳しい。