試験公開中

このエントリーをはてなブックマークに追加

Tailwind CSSまとめ

インプレスR&D

2,200円 1,100円 (1,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
  • バージョン: 1.0.0
  • ページ数: 196ページ(PDF版換算)
  • 対応フォーマット: PDF, EPUB
  • 出版社: インプレスR&D

対象読者

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 新規機能

さいごに

Home 書籍一覧 Tailwind CSSまとめ ▲ ページトップへ戻る