エンジニア選書シリーズTailwind CSS実践入門

[表紙]Tailwind CSS実践入門

紙版発売
電子版発売

B5変形判/384ページ

定価3,740円(本体3,400円+税10%)

ISBN 978-4-297-13943-8

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

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

こんな方におすすめ

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

この書籍に関連する記事があります!

著者の一言

本書のサンプル

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像1

サンプル画像2

サンプル画像3

サンプル画像4

サンプル画像5

目次

第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だけでは担保できないデザインシステムの領域

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

著者プロフィール

工藤智祥(くどうちあき)

1991年生まれ。名古屋大学大学院情報科学研究科を経て,2016年ピクシブ株式会社に新卒入社。フロントエンドを中心にWebエンジニアとしてクリエイター向けプラットフォームの開発に携わる。2020年よりピクシブ社内のデザインシステム「charcoal」の開発に関わり,Tailwind CSSを基盤技術の一つに選択。2022年にOSS化した。

著書(共著)に『入門GUI──Webブラウザで作る本格インタラクション』(インプレスR&D)がある。

X(旧Twitter):@f_subal