Tweet
Tailwind CSSまとめ
2,200円
(2,000円+税)
本書はCSSのフレームワークの一つである、Tailwind.css(v2.1、v2.2、v3.0含む)の解説書です。CSSやVue、Reactなどのフロントエンドはわかるけど、Tailwind CSSが初めての人、Tailwind CSSをもっと詳しく知りたい、最新のバージョンでできることが知りたい人などにオススメです。
関連サイト
本書の関連ページが用意されています。
内容紹介
本書はCSSのフレームワークの一つである、Tailwind.css(v2.1、v2.2、v3.0含む)の解説書です。v2.2やv3.0の新機能である、
・Tailwind CLI について
・Just-In-Time モードの強化（任意の値など）について
・新規ユーティリティなどの追加について
も収録。CSSやVue、Reactなどのフロントエンドはわかるけど、Tailwind CSSが初めての人、Tailwind CSSをもっと詳しく知りたい、最新のバージョンでできることが知りたい人などにオススメです。みなさまがTailwind CSSを導入するにあたっての一助になれば幸いです。
書誌情報
- 著者: 古賀 広隆
- 発行日: 2022-02-11 (紙書籍版発行日: 2022-02-11)
- 最終更新日: 2022-02-11
- バージョン: 1.0.0
- ページ数: 196ページ(PDF版換算)
- 対応フォーマット: PDF, EPUB
- 出版社: インプレス NextPublishing
対象読者
CSS,フレームワーク,Web DEVELOPMENT,Vue.js,技術書典,同人誌に興味がある人
著者について
古賀 広隆
1985年佐賀県生まれ、三重県四日市市在住。情報デザイン系の専門学校でCGデザインを専攻し、卒業後はSler系中小企業にプログラマーとして就職。12年間、中規模のWeb系Javaシステム設計や開発に携わる。その後、特にフロントエンドの最新技術に以前から興味があり、オタク趣味や今までのバックグラウンド、最新技術が活かせる、フルリモートワークの虎の穴ラボ株式会社へ2020年12月に転職。最近は、大規模なシステムに対して試行錯誤しながら、サーバサイドやフロントエンドの開発を主に担当。
目次
はじめに
- この本の内容について
- 著者について
- お問い合わせ先
- 免責事項
- 本書のフォントについて
- 本書のコマンド、ソースコードなどについて
- 表記関係について
第1章 Tailwind CSSについて
- 1.1 ユーティリティファーストで低レベルとは
- 1.2 オリジナルのデザインシステムがつくれる
- 1.3 高い柔軟性がある
- 1.4 機能やコンポーネントを拡張することができる
- 1.5 保守性が高くなる
第2章 カスタム関数、命令について
- 2.1 @apply
- 2.2 @layer
- 2.3 @variants
- 2.4 @responsive
- 2.5 @screen
- 2.6 theme関数
第3章 カスタマイズについて
- 3.1 テーマの設定をする（theme）
- 3.2 バリアント（擬似クラスやレスポンシブ）の設定をする（variants）
- 3.3 プラグインの設定をする（plugins）
- 3.4 プリセットの設定をする（presets）
- 3.5 プレフィックスの設定をする（prefix）
- 3.6 CSSの強制適用を設定する（important）
- 3.7 区切り文字の設定をする（separator）
- 3.8 ユーティリティの有効／無効を切り替える
第4章 インストールについて
- 4.1 Tailwind Play（オンライン実行環境）
- 4.2 Node.jsのインストール
- 4.3 Tailwind CSSをプロジェクトにインストールせずに利用する
- 4.4 Vue3 ＋ Vite ＋ Tailwind CLI
- 4.5 その他
第5章 開発ツール（Visual Studio Code）について
- 5.1 Tailwind CSS IntelliSenseプラグインについて
- 5.2 Tailwind Docsプラグインについて
- 5.3 Tailwind Shadesプラグインについて
- 5.4 Headwindプラグインについて
第6章 主要なユーティリティクラスについて
- 6.1 コンテナ（container）
- 6.2 オブジェクトの位置（object-{side}）
- 6.3 子要素間の空白（Space Between）
- 6.4 子要素間の区切り線（Divide）
- 6.5 プレースフォルダーの文字色（Placeholder Color）
- 6.6 グラデーションの色（Gradient Color）
- 6.7 要素のアウトライン（Ring）
- 6.8 要素の影（Shadow）
- 6.9 ふたつの状態間の変化（Transition）
- 6.10 変形の起点（Transform Origin）
- 6.11 変形の拡大率（Transform Scale）
- 6.12 変形の移動距離（Transform Translate）
- 6.13 変形の傾き（Transform Skew）
- 6.14 アニメーション（Animation）
- 6.15 インタラクティビティ（Interactivity）
第7章 設計手法を検討する
- 7.1 CSS設計思想を導入せずに、Tailwind CSSで直接、HTMLやJSXにクラスを書く
- 7.2 BEM
- 7.3 FLOCSS
- 7.4 Atomic Design
第8章 プラグインの追加を検討する
- 8.1 ダークモード
- 8.2 tailwind TYPOGRAPHY
- 8.3 @tailwindcss/forms ＆ Tailwind CSS Custom Forms
- 8.4 tailwindcss-elevation
- 8.5 Tailwind Direction
第9章 開発する効率を上げる
- 9.1 Tailwind UI
- 9.2 Tailwind Ink
- 9.3 Tailblocks
- 9.4 Tails
- 9.5 チートシート
第10章 Just-in-Time Modeを使用する
- 10.1 Just-in-Time Modeのメリット
- 10.2 Just-in-Time Modeのデメリット
- 10.3 Just-in-Time Modeの有効化
- 10.4 Just-in-Time Modeの新機能について
第11章 Tailwind CLIを使用する
- 11.1 Tailwind CLIの特徴
- 11.2 CDN版と比較する
第12章 daisyUIを使用する
- 12.1 daisyUIとは
- 12.2 daisyUIを使ってみよう
第13章 Tailwind CSS v3について
- 13.1 インストール方法
- 13.2 変更点
- 13.3 新規機能