目次

第1章　ユーティリティファーストとは何か

1.1　ユーティリティファーストによるマークアップの基本

• 「セマンティックな」CSSによるアプローチ
• Tailwind CSSによるユーティリティファーストなアプローチ

1.2　ユーティリティファーストのメリット

• クラス名を考える必要がない
• HTMLとCSSを交互に見る必要がない
• 影響範囲が明確である

1.3　CSS設計の変化の歴史

• BEM──セマンティックなCSSにおける規約
• CSS ModulesとScoped CSS──コンポーネント志向とスコープの模倣
• CSS in JS──テーマオブジェクトという発明

1.4　既存のCSS設計から学べる教訓

• 詳細度やカスケーディングといったCSSの性質を考慮するのは難しい
• 多くの開発者はクラス名を工夫するよりもコンポーネントを設計するほうが得意
• UIデザインの自由度は一貫性のなさとトレードオフの関係である

1.5　なぜ今ユーティリティファーストなのか

第2章　Tailwind CSSはどういうフレームワークか

2.1　Tailwind CSSが何を提供しているか

• ユーティリティを静的なCSSで提供すること
• ユーティリティこそがメインのクラスであること
• カスタマイズが始めから念頭に置かれていること
• 最小限のサイズのCSSを提供すること
• ヴァリアントによる条件付きスタイルのサポート

2.2　Tailwind CSSが何をやっていないか

• 便利なUIコンポーネントは提供しない
• CSSの理解を不要にするものではない

2.3　まとめ

第3章　Tailwind CSSを導入する

3.1　Tailwind CSSをインストールする

• Tailwind CLIを用いてプロジェクトのセットアップをする
• PostCSSプラグインとして用いる
• webpack・Viteなどのバンドラに統合する
• スタンドアローン版Tailwind CLIを利用する

3.2　設定ファイルを書く──セットアップに必要な設定

• contentでクラスを使うファイルを設定する
• importantで詳細度をコントロールする

3.3　設定ファイルを書く──テーマをカスタマイズする

• themeの構造
• theme.colors──カラーテーマを変更する
• theme.spacing──空白の幅を変更する
• theme.screens──ブレークポイントを変更する
• ほかの値を参照する
• 特定のコアプラグインを無効化する

3.4　開発用に確認する

• Play CDNを利用する
• Tailwind Playを利用する

3.5　エディタをセットアップする

• VS Code向けの拡張機能をインストールする

第4章　Tailwind CSSでマークアップする

4.1　Tailwind CSSにおけるマークアップ

• 大量のクラスを飼い馴らす
• 使っているクラスを抽出できるように書く

4.2　基本的なユーティリティ

• 背景色
• 文字
• スペーシング
• ボーダー
• サイズと形
• 画像および置換要素
• 表示と非表示
• フレックスボックスとグリッド
• 箇条書き
• 表
• ブロックのレイアウトを制御する
• 効果
• CSSフィルタ
• アニメーションとトランジション
• トランスフォーム
• 要素のはみ出しとスクロール
• フォームとインタラクション
• SVG

4.3　基本的なモディファイア

• 擬似クラス
• 擬似要素
• アットルールによる分岐──メディアクエリ、@supportsなど
• 属性に対する分岐
• groupとpeer──ほかの要素の状態に依存する

4.4　特殊な記法

• 設定にないスタイルを当てる
• あるクラスを強制的に!importantにする

4.5　公式プラグインを便利に使う

• Typographyプラグイン
• Formsプラグイン
• Aspect Ratioプラグイン
• Container Queriesプラグイン

第5章　Tailwind CSSの背後にあるコンセプトを理解する

5.1　プラガブルなCSSフレームワークであること

5.2　JITとは何か

• Tailwind CSSは未使用のクラスを消しているわけではない
• AOTコンパイルとPurgeCSSの時代
• JITエンジンの導入
• 逆に、JITによって不可能になったこと

5.3　関数とディレクティブ

• ディレクティブ
• カスタム関数

5.4　Preflight

• デフォルトのマージンは除去される
• 見出しのスタイルは完全に除去される
• 箇条書きリストのスタイルは完全に除去される
• 画像や動画はデフォルトでdisplay: blockである
• ボーダーの色はデフォルトでテーマに従う
• すべての要素はデフォルトでbox-sizing: border-boxである

5.5　ダークモード

• ダークモードはどのようなしくみで実装できるか
• Tailwind CSSにおける標準のダークモード
• Tailwind CSS標準のダークモードを使わない方法

第6章　Tailwind CSSでコンポーネントを設計する

6.1　CSSにとって抽象とは何か

• CSSレイヤにおけるコンポーネントに意味はあるのか

6.2　コンポーネントの責務とインタフェース

• 正しい粒度にしつつ、命名を最小限にする
• 「基底コンポーネント」という誘惑に抗う
• スタイルの上書きをいかにして許可するか

6.3　コンポーネントに閉じないスタイルを前提に設計する

• Tailwind CSSのスタイルはコンポーネントに閉じない
• コンポーネントを配る、どうやって？

6.4　Tailwind CSSを補完するライブラリ群

• ヘッドレスなコンポーネントライブラリと組み合わせる
• アニメーションをほかのライブラリに頼る

第7章　Tailwind CSSをカスタマイズする

7.1　設定ファイルの高度な利用

• クラスの抽出ルールを変更する
• クラスの命名規則をカスタマイズする

7.2　presetを配布・利用する

• プリセットを作成する
• Tailwind CSSはどのように設定をマージするか

7.3　JavaScript APIを利用する

• コードから設定を参照する
• 吐き出されるクラスの一覧を取得する

7.4　独自のプラグインを作成する

• プラグインAPIの使い方
• いつ、そしてなぜプラグインを自作するか
• カスタムのコンポーネントとユーティリティを作る──ハーフレディングを除去した文字クラスを作る
• カスタムのベーススタイルを作る──ダークテーマにCSS変数を使用する
• カスタムのヴァリアントを作る──言語ごとにスタイルを変更できるようにする

第8章　Tailwind CSSを既存のプロジェクトに導入する

8.1　なぜ既存のプロジェクトにTailwind CSSを導入するのか

• Tailwind CSSを移行先として選定する

8.2　既存CSSとの衝突を避けるために気を付けること

• 移行のスコープを決める
• Preflightを無効にする
• prefixで同名のクラスとの衝突を避ける
• ほかのCSSプリプロセッサと併用する

8.3　まとめ

第9章　ユーティリティファーストでデザインシステムを構築する

9.1　デザインシステムとは何か

• なぜデザインシステムにTailwind CSSを用いるのか
• 「ピクセルパーフェクト」は目的ではなく結果である
• 最初から完全を目指さない──コンポーネント集からスタートしない

9.2　デザイントークンを定義する

• デザイントークンとは何か
• トークンの命名──値どおりの名前（リテラル）か、意図による名前（セマンティック）か
• カラーパレット──トークンに階層を設けるべきか
• スペーシング──判断の負荷を減らす
• タイポグラフィ──大きさを予測可能にする

9.3　デザインシステムを継続的に運用する

• 設定ファイルをライブラリとして配布する
• 配布される設定ファイルは何を提供すべきか
• デザインシステムを管理するチームを作るべきか

9.4　Tailwind CSSだけでは担保できないデザインシステムの領域

• コンポーネントの挙動に関するルール
• 画像などのリソース
• アクセシビリティの担保