Tailwind CSS Recap

https://tailwindcss.com

HTMLの基礎

https://developer.mozilla.org/ja/docs/Web/HTML

• ブロック要素は縦にならぶ
• インライン要素は横に並ぶ
• セマンティクタグが推奨
• Tailwindを利用する場合はClassで指定。大文字小文字の区別はない。
• HTMLは全てBox。Boxととにmarginはpaddingが設定できる。
• 空きは8の倍数にすると綺麗になる。Tailwindでは4の倍数を基準にすると良き
• インライン要素は上下に空白を作らない
• ブロック要素を横に並べる場合はflexやgredが使われる
• 幅と高さはインライン要素には適用されない
• htmlタグのfont-sizeを100%にすると1remが16pxになる

Ver3での変更点

• Jist In Time(JIT) の採用
• 全カラーを使用可能
• スクロール位置の関係など
  全体的に機能が強化されている。

marginとpading

• 4を基準で1文字であることを意識すると調整しやすい。

幅と高さ

• 4が標準であると意識しやすい
• remは固定、%レスポンシブむけ
• 幅はflexと使うことが多い

フォント・テキスト

• 大きさrem 1文字
• 日本語はカスタマイズで利用可能

色

• 数字が大きくなると濃くなる
• 配色は70:25:5 = ベース:アクセント:サブ がよいとされている

擬似要素

• inputタグなどはfocus:outline-noneでデフォルトのカラーを打ち消せる

線関係

• border 線
• divide 分割の区切り
• ring boxモデルの外側に線をつける

画像関連

• backgroundの場合は縦横サイズの指定が必要
• imgの場合は幅は自動調整
• img 幅を指定するといい感じに小さくなる。高さを指定すると変倍がかかる。
• objectで収める方法を指定できる

display

表示方法を制御する

• 要素
  • inline
  • block
  • inline-block
• ボックス
  • flex
  • grid
  • table

CSS Box Alignment Module

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_box_alignment#

FlexBoxとGrid

• Flexbox
  • 縦か横に並ぶコンテンツに向いている。
  • 1次元
  • メニューなど
• Grid
  • 2次元の縦と横
  • 複雑な配置向け

Tailwindはモバイルファーストなので小さいサイズをデザインして大きくするのがベスト

モバイルファーストインデックス

スマホを優先的に表示する

• sm スマホ
• md タブレット
• lg ノートpc

max-は最大値を決めるのに便利

Position

重なりや表示位置の制御

• 親にrelatice、子にabsoluteをつける

• topなどで位置調整

• fiexdやstickyなどがある

• z-indexで重なり順を指定

overflow

はみ出した要素に表示方法を制御

• imgにマスクをかける場合などに利用

表示非表示

• opacity-0は消えるが透明になるだけでクリックできる
• invisibleは要素はあるが消える
• hiddenは要素が消える

Container

ブレイクポイントの間に幅を固定する機能

デザインについて

• 4原則

  • 近接
  • 整列
  • 反復
  • 対比

• Atomicデザイン
  小さい要素をつくて、組み合わせていく

  ボタン

• 優先度を決めて3種類ぐらい。全てに背景が必要なわけではないことを注意

カード

• サイズ、太さ、色でメリハリを

https://heroicons.com
https://tailblocks.cc
https://tailwindui.com/?ref=top

npx tailwindcs init
npx tailwindcs init --full

fullの出力を参考にすると設定しやすい

@tailwind base;
normalize.css
クロスブラウザ対応
デフォルトスタイル
@tailwind components;
コンテナーが入っている
@tailwind utilities;
クラスが入っている

バージョン3

• はJust-In-Timeが標準。パージがない。