TailwindCSSとは
CSSフレームワークであり、utility classを使って独自のデザインをすることができるので、カスタマイズしやすい。
Bootstrapだと簡単に設計しやすい分、似たようなデザインになってしまうことがあるのが欠点ですが、Tailwindではオリジナリティ高いデザインを実現できます。
TailwindCSSを学ぼうと思った理由
単純に流行っているから
はじめに
長めになりそうなので、何回に分けて投稿したいと思います！
また、超絶初心者なため、間違いがあれば指摘お願いいたします。
TYPOGRAPH(文字)
文字の色
<pclass="text-red-400">赤文字</p>text-(色)-(数値)ように書くことで色を変えることができます。
数値が大きいと濃い色になり、小さいと薄い色になります。
文字の大きさ
<pclass="text-xs">文字の大きさ(xs)</p><pclass="text-sm">文字の大きさ(sm)</p><pclass="text-base">文字の大きさ(base)</p><pclass="text-lg">文字の大きさ(lg)</p><pclass="text-xl">文字の大きさ(xl)</p><pclass="text-2xl">文字の大きさ(2xl)</p><pclass="text-3xl">文字の大きさ(3xl)</p><pclass="text-4xl">文字の大きさ(4xl)</p><pclass="text-5xl">文字の大きさ(5xl)</p><pclass="text-6xl">文字の大きさ(6xl)</p><pclass="text-7xl">文字の大きさ(7xl)</p><pclass="text-8xl">文字の大きさ(8xl)</p><pclass="text-9xl">文字の大きさ(9xl)</p>下に行くに連れて文字は大きくなっていきます。
文字の太さ
<pclass="font-thin">文字の太さ(font-thin)</p><pclass="font-extralight">文字の太さ(font-extralight)</p><pclass="font-light">文字の太さ(font-light)</p><pclass="font-normal">文字の太さ(font-normal)</p><pclass="font-medium">文字の太さ(font-medium)</p><pclass="font-semibold">文字の太さ(font-semibold)</p><pclass="font-bold">文字の太さ(font-bold)</p><pclass="font-extrabold">文字の太さ(font-extrabold)</p><pclass="font-black">文字の太さ(font-black)</p>下に行くに連れて太くなっていきます。
margin padding
m-(数値）としていすることで使うことができます。
また、top、right、left、buttomの頭文字をとって、mt-(数値)、mr-(数値)、ml-(数値)、mb-(数値)と書くことで各方向にmarginをつけることができます。(paddingも同様)
<!--全方向にmargin--><divclass="m-16">marginつけました(全方向にmargin)</div><!--全方向にpadding--><divclass="p-16">padding(全方向にpadding)</div><!--上にmargin--><divclass="mt-16">marginつけました(上にmargin)</div><!--上にpadding--><divclass="pt-16">padding(上にpadding)</div><!--右にmargin--><divclass="mr-16">marginつけました(右にmargin)</div><!--右にpadding--><divclass="pr-16">padding(右にpadding)</div><!--左にmargin--><divclass="ml-16">marginつけました(左にmargin)</div><!--左にpadding--><divclass="pl-16">padding(左にpadding)</div><!--下にmargin--><divclass="mb-16">marginつけました(下にmargin)</div><!--下にpadding--><divclass="pb-16">padding(下にpadding)</div>また、下記のように書くことでx、y方向に指定することもできます。
<!--x方向にmargin--><divclass="mx-16">marginつけました(x方向)</div><!--x方向にpadding--><divclass="px-16">padding(x方向)</div><!--y方向にmargin--><divclass="my-16">marginつけました(y方向)</div><!--y方向にpadding--><divclass="py-16">padding(y方向)</div>幅と高さ
<divclass="w-20 h-20 bg-green-100">高さ幅</div>w-(数値)、y-(数値)と書くことで幅と高さを指定できます。
ボーダー
<divclass="border border-indigo-600">border</div>このように書くことでborderをつけることができます。
また、border-(数値)で指定することでborderの太さを変更できます。
<divclass="border-4 border-indigo-600">border</div>背景色
<divclass="bg-red-400">背景色</div>bg-(色)-(数値)で書くことで背景色をつけることができます。