内容紹介

【ユーティリティクラスという「契約」の力】

本書は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）がある。