tailwindcssで調べたことメモ

tailwindcss(追い風)

• UIキットではなく、ユーティリティクラスになっているので、カスタマイズしやすい
• レスポンス対応、flexbox,grid採用
• Laravel8からtailwindcssが採用される

CDNで利用する場合の注意点

下記のことがCDNで利用する場合できない。

• Tailwindのデフォルトテーマをカスタマイズすることはできません
• @ apply、@ variantsなどのディレクティブは使用できません。
• グループフォーカスのような追加のバリアントを有効にすることはできません
• サードパーティのプラグインをインストールすることはできません
• 未使用のスタイルをツリーシェイクすることはできません

CDNで利用する場合、下記のタグを入れるだけ。

    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

tailwindcss.com

ボックスモデル

• 線 border
• 外側の余白 margin
• 内側の余白 padding
• 上(top)下(bottom)左(left)右(right)

※デザインは８の倍数(４の倍数)を使うと綺麗に収まる

mt-4 (TOP) mb-4 (buttom) ml-4 (left) mr-4 (right) mx-4,(横) my-4（高） mx-auto (自動調整)

レスポンシブデザイン

tailwindcss.com

ブレークポイントプレフィックス    最小幅   CSS
sm  640px   @media (min-width: 640px) { ... }
md  768px   @media (min-width: 768px) { ... }
lg  1024px  @media (min-width: 1024px) { ... }
xl  1280px  @media (min-width: 1280px) { ... }
2xl 1536px  @media (min-width: 1536px) { ... }

ブレイクポイントのカスタマイズ

tailwindcss.com tailwindcss.com

• tailwind.config.jsファイルに下記の記述を追加する

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

デフォルトの間隔スケール

tailwindcss.com

backgroud-color

tailwindcss.com

hover、フォーカス、およびその他の状態

• hoverで色をかえる

<button class="bg-green-600 hover:bg-green-400 text-white font-bold w-32 py-4">ボタンです</button>

• focusで色をかえる。inputタグの場合、フォーカスがあたるとデフォルトで青色が指定されるので、outline-noneを指定してから赤色を指定する

<input type="text" class="border-2 p-2 focus:outline-none focus:border-red-300">

tailwindcss.com