15. Tailwind CSSの意味

補足：Tailwind CSSを使うメリット

・　クラス名があらかじめ決められているので、クラス名を考える時間が省ける

・　HTMLを見ればCSSファイルを見なくてもCSSがわかる

・　CSSファイルから特定のクラス名を消す時に、「どこかでそのクラス名が使われているかもしれないから、消すのが怖い」というのがなくなる

※　ReactやNext.jsを使う場合はTailwindCSSがデフォ

※　デメリット：クラス名がひたすら長くなる（１つのクラスが１つのCSSプロパティを表しているため）、クラス名を知らないと使えない、

方向を絞りたいとき

上：「t」を足す（例：pt-4, mt-8）

下：「b」、左：「l」、右：「r」

左右：「x」を足す（例：px-4）

上下：「y」を足す（例：py-4）

数字はpxではなくrem

p-4は4pxではなく、1rem

p-1 0.25rem（4px）

p-2 0.5rem（8px）

p-3 0.75rem（12px）

といった感じで数字を４倍するとpxが出てくる

数字ではない値

w-full >. width: 100%

w-screen. >. 画面幅いっぱい

h-screen. >. 画面の高さいっぱい（100vh）

w-fit. >. 中身に合わせた幅

m-auto. >. margin: auto

p-px. >. 1px

色は濃さも選べる

bg-blue-500

・　濃さは50や100（薄い背景色）〜600,700（文字色やボタン背景の濃さ）〜800,900（見出しの濃さ）で

100から900まで100刻みで選べる（＋50）

・　色名はslate, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, roseなど色々

画面幅で切り替える（メディアクエリ）

className=”flex flex-col md: flex-row”> は768px以上の時だけflex-direction: rowという意味

md: hiddenはタブレット以上なら非表示という意味(ハンバーガーメニューで使う)

sm:　640px（大きめのスマホ）以上ならば

md:　768px（タブレット）以上ならば

lg:　1024px（パソコン）以上ならば

xl:　1280px以上ならば

2xl:　1536px以上ならば

hoverとfocus

class=”bg-orange-500 hover:bg-orange-600″

※　hover:の後に半角スペースを入れないこと！！

focus:

focus-visible:

first: は:fist-childと同じ

last:　は:last-childと同じ

odd:　はすべての子要素に書いておけば奇数行にだけ効く。:nth-child(odd）と同じ

even:

active:

dark: は端末がダークモードの時

group-hover:

transition duration-200　（：はいらない）

block

inline要素をblock要素に変える

padding

p-4 > padding: 1rem;

px-4 > 左右に1rem

py-2 > 上下に0.5rem

margin

m-4 > margin:

Space（MDX概念）

space-y-2　　クラスをつけた親要素の子要素同士がY方向に0.5rem開く

width

w-full

決まった値で足りない時は、w-[420px]

max-w-3xl　要素の最大の横幅を3xl（48rem）(768px)にしてそれ以上は広がらないようにする

height

h-screen

background-color

bg-white > background-color: #fff;

border

border-2 　０.5remの太さの線

border-b　下にボーダーを入れる

border-gray-200　ボーダーの色はグレイで濃さが200

border-radius

rounded-xl > border-radius: 0.75rem;

box-shadow

shadow-md > box-shadow: …;

font-size or color

text-xs. >. 0.75rem(12px)

text-sm. >. 0.875rem(14px)

text-base. >. font-size: 1rem(16px)

text-lg >. 1.125rem;(18px)

text-xl. >. 1.25rem(20px)

text-2xl. >. 1.5rem(24px)

text-3xl. >. 1.875rem(30px)

text-4xl. >. 2.25rem(36px)

text-red

決まった値で足りない時は

text-[#ff8a3d]

font-weight

font-normal

font-medium

font-semibold

font-bold > font-weight: 700;

font-extrabold

flex

[https://piyogramming.com/ja/articles/tailwind/layout/]

flex　横ならべにする

flex-col

items-center　子要素を上下中央に揃える

gap-6　子要素同士の間を6（24px）空ける