Tailwind CSSは気になっているので、週末にTailwind CSS実践入門（エンジニア選書） を読んでみました。
Tailwind CSSに付いては以前記事を書いています、 Tailwind CSSの良さが少しわかった気がした と Tailwind CSSでレスポンシブ・デザインやダーク・モードに対応してみたが、簡単だった！ です。
Gihyo Direct より
なぜTailwind CSSの本を読んだのか
私はプログラマーでWebのデザイは出来ません、またCSSは苦手です。そんな私にとってMUIや React BootstrapなどのUIコンポーネント・ライブラリーはありがたい存在です。適当なコンポーネントを選んで並べていけば、今風なデザインの美しい画面が簡単に構築できます。
しかし、UIコンポーネント・ライブラリーには不安があります
- ロックインされてしまう
- 独自なタグ、属性を覚えないといけない
- 当然ですが別のUIコンポーネント・ライブラリーではタグ、属性などは違う
- メジャーバージョンアップで互換性のないバージョンアップが起こると、修正がたいへん
- カスタマイズが大変な場合がある
- 色のように用意されている属性は簡単にできるが、変更が難しい属性がある
- カスタマイズするにはStyle属性で指定するCSSの知識が必要になり、CSSの難しさにハマる事がある
そんなときに、Tailwind CSSを知りTailwind CSSの良さが少しわかった気がした い書いたように、とても良い印象を受けたのです。
しかしデザイン能力が低い私が、Tailwind CSSを使い適切なコンポーネントが作れるのか不安を覚えました。そこで本を買って勉強勉強する事にしました。
感想など
やっと、本の感想です。
第1章「ユーティリティファーストとは何か」、第2章「Tailwind CSSはどういうフレームワークか」を読むことでTailwind CSSがどういう理由で作られたか、何を目指しているのかが、理解できるので読むべき章です。
- Tailwind CSSはReactやVueのようなコンポーネント化技術がある前提で作られている
- 過去にあったCSSの技術にはSCSSのような、CSS自体をモジュール化する技術もあった
- 従来のWebはHTMLとCSS両方を読まないと（書かないと）いけませんでしたが、Tailwind CSSはHTML（ReactならJSX）を読むだけで（書くだけで）済む！
- 従来の問題だったクラス名の付け方問題も発生しない
第4章「Tailwind CSSでマークアップする」はTailwind CSSの機能（クラス名）の解説です。たくさんの機能（クラス名）があり、全てを記憶する事はできませんが、一度は眺めてみると良いと思います
- 取りあえず興味がないところは、軽く眺めるだけで良いと思います
- ネットでも調べられますが、日本語でかかれていて網羅性が高いのは素晴らしいですね
第6章「Tailwind CSSでコンポーネントを設計する」は、上に書いたように私の不安点である、仕事で必要なコンポーネントを作るための考えるべき事やヒントが書かれています。ここでヘッドレスなコンポーネント、ヘッドレスなUIが登場します。
- この本ではHeadless UIやRadix UIを取り上げています
- 以前Headless UIのTanStack Tableがおもしろいというブログを書いています、UI要素を含んでいないコンポーネントを取り上げました、確かにヘッドレス・コンポーネントには可能性がありますね
まとめ
“デザイン能力が低い私が、Tailwind CSSを使い適切なコンポーネントが作れるのか不安” という問題は、この本を読んでも解決しませんでした。ただし、この本を読んだおかげでTailwind CSSを使う勇気が高まったのも事実です。
Tailwind CSSは、デファクトスタンダード的な位置づけに成りつつあるようです。先日あるReactの勉強会で生成AIにTailwind CSSを書かせている方がいました！
またUIコンポーネントの持つ機能とデザインを分離する、ヘッドレス・コンポーネント（ヘッドレス・UI）には可能性を感じます、新たなUIコンポーネント・ライブラリーが誕生するかも知れませんね。
おまけ
UIコンポーネントの代表であるMUIがTailwind CSSをサポートすれば良いような気がしますが、既にいろいろありますね😅
- Material Tailwind Tailwind CSSベースのMaterial DesignのUIコンポーネント
- Working with Tailwind CSS MUI公式ページにあるBase UIのカスタマイズでTailwind CSSを使う方法
