Tailwind CSS実践入門

工藤智祥

【ユーティリティクラスという「契約」の力】
本書はTailwind CSSの実践的な入門書です。フロントエンドエンジニア、マークアップエンジニア、そしてデザインシステムの構築に興味があるデザイナーを対象に、Tailwind CSSの中核的な思想である「ユーティリティファースト」の理解へといざないます。Tailwind CSSの基本的な使い方や、デフォルトテーマによって提供されるクラスの紹介はもちろん、テーマのカスタマイズやプラグインの作成によってデザインシステムを作るための実践的なノウハウも詳説します。


■こんな方におすすめ
・フロントエンドエンジニア、マークアップエンジニア
・デザインシステムの構築に興味があるデザイナー
・HTML+CSSはすでに身についているが、Tailwind CSSは使ったことがない方
・Tailwind CSSをすでに使っているが、より良い使い方を求めている方
・既存環境から移行やデザインシステムの構築に関心がある方


■目次
●第1章 ユーティリティファーストとは何か
1.1 ユーティリティファーストによるマークアップの基本
1.2 ユーティリティファーストのメリット
1.3 CSS設計の変化の歴史
1.4 既存のCSS設計から学べる教訓
1.5 なぜ今ユーティリティファーストなのか
●第2章 Tailwind CSSはどういうフレームワークか
2.1 Tailwind CSSが何を提供しているか
2.2 Tailwind CSSが何をやっていないか
2.3 まとめ
●第3章 Tailwind CSSを導入する
3.1 Tailwind CSSをインストールする
3.2 設定ファイルを書く──セットアップに必要な設定
3.3 設定ファイルを書く──テーマをカスタマイズする
3.4 開発用に確認する
3.5 エディタをセットアップする
●第4章 Tailwind CSSでマークアップする
4.1 Tailwind CSSにおけるマークアップ
4.2 基本的なユーティリティ
4.3 基本的なモディファイア
4.4 特殊な記法
4.5 公式プラグインを便利に使う
●第5章 Tailwind CSSの背後にあるコンセプトを理解する
5.1 プラガブルなCSSフレームワークであること
5.2 JITとは何か
5.3 関数とディレクティブ
5.4 Preflight
5.5 ダークモード
●第6章 Tailwind CSSでコンポーネントを設計する
6.1 CSSにとって抽象とは何か
6.2 コンポーネントの責務とインタフェース
6.3 コンポーネントに閉じないスタイルを前提に設計する
6.4 Tailwind CSSを補完するライブラリ群
●第7章 Tailwind CSSをカスタマイズする
7.1 設定ファイルの高度な利用
7.2 presetを配布・利用する
7.3 JavaScript APIを利用する
7.4 独自のプラグインを作成する
●第8章 Tailwind CSSを既存のプロジェクトに導入する
8.1 なぜ既存のプロジェクトにTailwind CSSを導入するのか
8.2 既存CSSとの衝突を避けるために気を付けること
8.3 まとめ
●第9章 ユーティリティファーストでデザインシステムを構築する
9.1 デザインシステムとは何か
9.2 デザイントークンを定義する
9.3 デザインシステムを継続的に運用する
9.4 Tailwind CSSだけでは担保できないデザインシステムの領域


■著者プロフィール
工藤智祥：1991年生まれ。名古屋大学大学院情報科学研究科を経て、2016年ピクシブ株式会社に新卒入社。フロントエンドを中心にWebエンジニアとしてクリエイター向けプラットフォームの開発に携わる。2020年よりピクシブ社内のデザインシステム「charcoal」の開発に関わり、Tailwind CSSを基盤技術の一つに選択。2022年にOSS化した。著書（共著）に『入門GUI──Webブラウザで作る本格インタラクション』（インプレスR＆D）がある。

• カテゴリ: ビジネス・実用
• ジャンル: IT・コンピュータ / 情報通信
• 出版社: 技術評論社
• ページ数: 384ページ
• 電子版発売日: 2024年01月29日
• コンテンツ形式: EPUB
• サイズ(目安): 21MB

[ブクログ · ★★★★★]

技術的に難しい、さほど関係の無い箇所もあったため飛ばしながら読んだが、すごい本だ。
2024/2 時点、おそらくは日本語で Tailwind CSS を網羅した唯一の本。
ただ Tailwind の使い方を説明した本ではなくて、どういう時に Tailwind を使うべきか、どう使うべきか、すべきではないことは何か、非常に丁寧に書かれている。

[ブクログ · ★★★★★]

セマンティックなCSS設計を含む既存の手法で難しかったこととそれを乗り越えるためのユーティリティファーストという発明いった歴史の話から、ユーティリティクラスで書いて必要に応じてコンポーネント化するという考え方の話、TailwindCSSはカスタマイズも可能なのでなく、カスタマイズを前提としたフレームワークのフレームワークであるという話、さらに既存プロジェクトへの導入についての案内、デザインシステムの構築や運用手法についてのとっかかりとなる解説など、幅広く学べてとても楽しめた。これは単なるコーディングのリファレンス・解説書ではない。実践入門というタイトルに偽りなし。