🦁

自分が使用したTailWindのまとめ

2023/03/01に公開

自分が使用したTailWindのまとめていく。
条件としては、ドキュメントを見れば分かるシンプルな例（ex: 文字を太字にしたい等）以外は記載していく。
コンポーネントを動作確認するのにおすすめなサイト
https://play.tailwindcss.com/

widthの真ん中にwidgetを配置したい場合
- flex + justify-centerを使用する。

<div class="flex justify-center h-screen mt-3">
    <div class="text-center">
      <h1 class="text-4xl font-bold">Hello, World!</h1>
      <p class="text-lg text-gray-500 mt-4">This is centered using flexbox.         </p>
    </div>
  </div>

画像の下に背景を表示したい場合
- 背景は画像より大きくしたい。
- divでimg要素囲んだ場合、imgに何も指定しないと大きさが反映されない。
  - 反映させるには、親要素を取得するw-full,h-fullを指定すること。

<p>aaaa</p>
<div class="relative bg-gray-500 md:w-[29rem] md:h-[41rem]">
  <div class="absolute md:w-[27rem] md:h-[39rem]">
    <img src="https://placehold.jp/3d4070/ffffff/150x150.png" alt="Your Image" class="w-full h-full">
    <p>aaaa</p>
   </div>
</div>

borderが反映されない問題
- border-colorだけではなく、線の太さも指定するといけた。

<p class="border-4 border-green-100">
          hello world
</p>

flexboxの間を設定するやり方。
- space-x-{数値},space-y-{数値}を指定する。

その他トピック

レイアウトを組む場合は、必ずデバイスが小さい順から実装する。
- 小さい画面のデバイスでの表示は、大きな画面のデバイスでの表示よりも制限が多い。
- そのため例えばpc => スマホの順でレイアウトを組むと大体崩れる。
- 基本的には制限が多いデバイスから作成していくこと。

Discussion