Tailwind CSS実践入門(エンジニア選書) [単行本]

Tailwind CSS実践入門(エンジニア選書) の 商品概要

• 要旨（「BOOK」データベースより）

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

• 目次

  # ■第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だけでは担保できないデザインシステムの領域
  コンポーネントの挙動に関するルール
  画像などのリソース
  アクセシビリティの担保

• 内容紹介

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

• 著者紹介（「BOOK著者紹介情報」より）（本データはこの書籍が刊行された当時に掲載されていたものです）

  工藤 智祥(クドウ チアキ)
  １９９１年生まれ。名古屋大学大学院情報科学研究科を経て、２０１６年にピクシブ株式会社に新卒入社。フロントエンドを中心にＷｅｂエンジニアとしてクリエイター向けプラットフォームの開発に携わる。２０２０年よりピクシブ社内のデザインシステム「Ｃｈａｒｃｏａｌ」の開発に関わり、Ｔａｉｌｗｉｎｄ　ＣＳＳを基盤技術の一つに選択。２０２２年にＯＳＳ化した

• 著者について

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

Tailwind CSS実践入門(エンジニア選書) の商品スペック