【PR】『Tailwind CSS実践入門』を2024年1月26日に出版します
おそらく日本語の商業出版の技術書ではほぼ初となる[1]、Tailwind CSSの本格的な入門書を発売します（そして私にとっては初の単著となります！）。
技術評論社様の「エンジニア選書シリーズ」という比較的新しめのレーベルです。表紙が風車なので、愛称として「風車（ふうしゃ）本」とでも呼んでもらえると喜びます！
物理版＆電子版の両方が出ます。Amazonほか各種ECサイトなどでお求めください。
コンセプトと構成
この本はHTMLやCSSそのものの基礎は扱いません。
「すでにCSSを使ったことがあり、CSSの設計で苦しみを味わってきた開発者（本文まえがきより引用）」が対象読者です。
コンセプトとしてはTailwind CSSというフレームワークの入門書である以上に、ユーティリティファーストという思想への入門書を志向しています。全9章ですが、どの章も概ね以下の3つのテーマを巡って展開しています。
- ユーティリティファーストがどういう思想なのか
- ユーティリティファーストに従って、どのようにマークアップやコンポーネント設計を行うか
- ユーティリティファーストに従って、デザインシステムを作るには何をすればよいか
執筆時点ではTailwind CSSの最新バージョンは3.3でしたが、v3.4とv3.5でいくつか大きい変更が入ることが告知されていたので、その内容も（未リリース時点のCHANGELOGを元に）扱っています。
正直v3.4は校了直前にリリースされたのもあって、本編では扱いきれてなかったり説明が不足している機能もあると思います（v3.5はもともと年内のリリースが予定されていましたが、このまま行くと出なさそうです。本書でも未来の話として書かれています）。
本書のサンプルコードのほとんどは、プレーンなHTMLまたはReact（JSX）のいずれかで構成されています。1つの「サンプルアプリ」を作るといった感じではなく、主にマークアップの例示や設計の説明として書いています。Vue.jsについてはHeadless UIやRadix VueといったVue.js向けのヘッドレスコンポーネントを扱う際に軽く触れるといった感じです。
コンポーネントライブラリの利用例や、カスタムのプラグインの作例（第7章）については以下のリポジトリに置いています。
この本で扱うこと・扱わないこと
この本はユーティリティファーストという思想への入門書です。裏を返すとこの本は、ユーティリティファーストの実践にあまり寄与しないプラクティスやツールは紹介しないか、しても批判的に扱うというスタイルを採っています。たとえば@applyについては基本的に「使うな」というスタンスで書かれています。作者のAdam Wathan自身いまTailwind CSSを作るなら入れないだろうと言ってたぐらいですしね。
そういうスタンスですから、たとえTailwind CSSのコミュニティである程度有名なツールであっても説明に出てこないというケースがあります。300ページ以上ある本文の中で、たとえばdaisyUIは合計で3行しか登場しませんし、twin.macroやtwindのように紹介していない有名ツールもあります。
「クラスが多すぎるから読み書きしやすくしたい」とか「単に短く書けるメリットだけを享受したい」気持ちに寄り添って欲しい人が本書を読むと、やや突き放されたように感じるかもしれません（最終的にはそういう人もTailwind CSSらしいコードを書けるように導いているつもりではあります）。
一方でclassnames、clsx、tailwind-merge、cva（class-variance-authority）、tailwind-variantsについては比較的丁寧に紹介しています。これらはユーティリティクラスの良さを損なうことなくメンテナビリティに寄与するツールだからです。基本的にはこうしたツールを使って大量のクラスを「飼い馴らす」ことを覚えてもらうというのが本書のスタンスです。
翻って、一見変に見えるがユーティリティファーストという思想に照らすと有意義な機能については、なぜそれが必要なのかをできるだけ詳しく説明するようにしています。たとえばこの本はArbitrary Values（w-[57px]みたいなアレ）についてはおよそ3ページかけてその必要性を擁護しています。詳しくは第4章を見てください。
あるいは@layer componentsやプラグインAPIのaddComponents()を使う際も、できるだけ.cardクラスのようなBootstrapっぽい例示は避け、「CSSのおける抽象的なデザインパターンとはどういうものか」を実感してもらえるような説明に寄せています（addComponents()の説明で『Every Layout』由来の例が多用されるのはこのためです）。これについては第5章と第7章を読んでください。
そして第6章では、Tailwind CSSの利用を前提にしたコンポーネント設計論を扱っています（ここだけはReact成分が強めです）。この章はTailwind CSSとの親和性を鑑みてできるだけ「ヘッドレスな」ライブラリを前提に説明しています。たとえばHeadless UI、Radix UI、React Aria、shadcn-uiについては説明に紙面を割いています。この章はプロジェクト内でTailwind CSSを使う人のみならず、デザインシステムを作る人向けに技術選定のしかたを解説する章としても読めるでしょう。
デザインシステムの入門書として
Tailwind CSSは設定ファイルのテーマからクラスを生成できるようになっており、デザインシステムを作る際のメタフレームワークとして利用できます。実際、筆者は勤務先のデザインシステムを作る際にTailwind CSSを基盤技術の一つに選定しました（2020年の段階で企業のデザインシステムに本格採用していたのは割と早かったと思います）。
そういうわけで、本書は実装寄りのデザインシステム入門書としても読むことができます。むしろ本書では、デザイナと協力してテーマを積極的にカスタマイズするやり方こそがTailwind CSSの王道の使い方だと想定しています。
デフォルトのテーマ設定は確かに便利ですが常にデザイナをそれに従わせるようなものではなく、いかにしてそこから脱却していくかという話題をできるだけ扱うようにしています。4章のクラスを紹介するところでさえ、覚えるつもりで読むよりもむしろデフォルトのテーマの良し悪しを理解する気で読むぐらいがよいでしょう（私は仕事ではTailwind CSSのデフォルトの色やスペーシングをほとんど使っていません）。
もし（実装に明るくない）デザイナーの方が本書を読もうと思った場合、とりあえず第1章、第2章、第9章の順に読むのがおすすめです。第9章はデザイナーがどういうテーマ（ないしデザイントークン）を設定すると良いかを議論しています。
特定の正解を示すというよりは、ありうる論点と選択肢をできるだけ提示するという姿勢で書かれているので、自身の課題感やプロダクトの事情などを頭において読むのが良いでしょう。その前提として、Tailwind CSSがどういう特徴を持っているのかを第1章と第2章で把握し、同僚のエンジニアとどういう協力ができそうかを考えるヒントにしてもらえると理想的です。
これに加えて、もしあなたが古くからあるサービスにデザインシステムを入れることを考える立場であるなら、第8章を読むのも良いでしょう。8章は既存プロジェクトにTailwind CSSを導入する際の考慮事項を検討しています。実装寄りの話がメインではあるものの、チームとしてどういうリニューアル作業が必要になりそうかをそこから想像することができるでしょう。
ちなみに第9章は、冒頭部分がgihyo.jp上に記事として公開予定です（発売日とほぼ同時に）。本書におけるデザインシステム観が説明されているのでご興味がある方はぜひ読んでみてください。
とにかく分厚い第4章
この本の第4章はTailwind CSSのデフォルトテーマで生成されるクラスを紹介しています（すべてのクラスを網羅しているわけではありません）。
が、あまりにもクラスの種類が多すぎて、第4章だけで本文全体のページ数の4割ほどを占めています。かなり異常な配分ですが、純粋に内容だけで章を分割した結果として見てもらえると幸いです。
紙版は小口にインデックス（国語辞典とかにあるアレです）が刷られているので、そっちを購入すると横から章ごとの量が見えてオススメです。
第4章を書くときは最初「公式サイトのドキュメントとほぼ同じ内容だし考えることなんかないだろう」と思っていましたが、実際やってみると構成面でめちゃめちゃ考えることがありました。どのクラスをどういう順番で説明するか、どのクラス同士を似たグループ（項）に属すると見なすかに作者のCSS観がかなり現れるからです（z-indexプロパティとisolationプロパティは連続して説明したほうがいいな、とか）。
個人的に気に入ってるのは.sr-onlyクラスをdisplayプロパティやvisibilityプロパティの直後に説明していることです。「アクセシビリティの節」みたいに隔離された場所に置くのではなく、要素の表示・非表示の方法として当たり前に使うべきものであるという価値観をこの配置によって示せた気がして、良かったなと思っています。
とまぁそんな第4章ですが、ここについてはある意味で辞書や図鑑みたいなものだと思った方が良いでしょう。知らずにKindle版を頭から読んで挫折しないよう注意してください。
経緯と謝辞
私が本書を書くきっかけになったのは@_yuheiyさんの紹介でした。
@_yuheiyさんがWEB+DB PRESSでTailwind CSS特集を書かれた後、入門書を書くお時間がとれそうにないとのことで、代わりに書けそうな人間として執筆の任を拝命いたしました。改めてありがとうございました。
また本書は以下のみなさん（アルファベット順、敬称略）にレビューを頂きました。Tailwind CSSの本を書くにあたって、思いつく限り最強と言えるメンバーにレビューをお願いできたと思っております。こちらも改めて感謝を申し上げます。
余談
今回の執筆を支える技術について扱った記事やスクラップがあるので、関連リンクとしておいておきます。
-
書いてる日の時点でAmazon.co.jpを検索すると自費出版や技術同人誌の商業化で出た本にもTailwind CSSを扱ったものがありそうですが、多分さまざまな留保をつければおおむね国内初と言っていいぐらいの感じ（？）です。 ↩︎
Discussion