Tailwind CSS を使ってみる

気になっていたTailwind CSSを使ってみるので、公式サイトを参考に作りながらざっくりチートシートも一緒に作る

最初にVScodeに拡張機能「Tailwind CSS IntelliSense」を追加

画面幅

設定済みの値はclass="w-3xs"で設定できる

幅100%はw-full 、画面幅いっぱいはw-screen
高さもだいたい同じ感じっぽい

余白 (margin / padding)

margin,paddingどちらも設定は同じ、
頭文字がmarginの場合は「m」
paddingの場合は「ｐ」

縦軸の余白はyをつける　py-[12px]
横軸の余白はxをつける　px-[16px]

autoは設定されているので下記のように書けばいい（左側がTailwindCSS）

margin: auto; / m-auto
margin-top: auto; / mt-auto

フォントサイズ

よく使いそうなフォントサイズは公式を見る
・12〜20pxまではtext-xsなど設定があり、20px以降は間を開いて設定がある（3の倍数？）

公式に設定がない時はclass="text-[100px]" のようにtext-に繋げて[]内で設定したいフォントサイズをpxまで書く

テキストの位置

下記のように書く
中央寄せ　text-center
左寄せ　　text-left

背景画像の設定

背景画像、class内に画像名を書くらしい！

class="bg-[url(画像のパス) no-repeat]"

HTMLでこの設定ができると、画像の切り替えをimgではなく背景画像で出来るので楽かも

position

プロパティ省略、値だけ書けばいい
右寄せ下揃えの場合は下記

<div class="relative">
  <h1 class="absolute right-8 bottom-0">タイトル</h1>
</div>

※ただし-の後の数値は変数「–spacing」で決められた値をかけた数値になる
例）「–spacing」の値はデフォルトの「0.25rem」の場合は、8×4で32pxが設定される

擬似要素

:before, :afterの擬似要素も設定できるが、HTMLがかなり見辛くなる…
左右にbefore / after使いたい場合、1つの要素内で設定するともう何が何だかわからなくなりそうだったので、空要素使ったが、空要素使いたくないな…
他にいいやり方がないか探す

<h2 class="m-[72px] text-2xl text-center relative">
      <span class="before:block before:absolute before:w-[20px] before:h-[2px] before:bg-black before:top-[48%] before:left-[44%]"></span>
        Journal
      <span class="after:block after:absolute after:w-[20px] after:h-[2px] after:bg-black after:top-[48%] after:right-[44%]"></span>
</h2>

grid

グリッドレイアウト、普段使ってこなかったのでこの機会に使えるようになる
使いながら、「グリッドレイアウトの基本概念」を読む
長くなるかもなので、別でまとめる

object-fit

下記のように書く

object-contain
object-cover
object-fill

ここまで使ってみての感想

慣れていないので、自分で書いた方が早い。
一部背景画像などはHTMLに書き込めるので外部から読み込む時にimgタグを使わなくて良くなるので使いやすくなりそうな気もするが、
TailwindCSSはHTML側で全部設定するので、コードが読みにくくなりそう…
サイトで使う色はカスタマイズで変数として登録できるらしいので、調べてみる