Tailwind CSSを試す
かけるん環境
公式が用意してくれていたこちらを使う
経緯
トレンドなCSSフレームワーク（？）というのは聞いていたが、使用する機会がなかったため学習してみる。
また、CSSに対して苦手意識があり、常に「ぜんぜんわからん。俺は雰囲気でCSSをやっている」状態なので改めてCSSの学習をするという点でも良いと思った。
かけるん参考資料
こちらのZenn本を参考に動かしていく
かけるんサイズ指定
横幅の指定をやってみた
bg-orange-200はわかりやすくするため背景色を指定している
<div class="bg-orange-200 w-32">0.25×32rem(128px)</div>
<div class="bg-orange-200 w-full">100%</div>
<div class="bg-orange-200 w-[60%]">60%</div>
解説
クラスにw-32というように数値を指定すると、CSSのwidthが指定される。
数値の単位は1=0.25remとなっているため、ここでは0.25×32 = 8rem となっている。
また、w-fullやw-maxなどを指定することでwidth: 100%やwidth: max-contentといったCSSも適用することができる。
用意されていない数値を使用したい場合もあると思うが、その場合は
w-[60%]のように[]でくくってやれば指定できる。
と書いていて気付いたが、60%の指定は
w-3/5で指定できた。
ドキュメントはちゃんと確認しよう。
縦幅の指定をやってみた
基本的に縦幅の指定をすることはないと思うが、ビューポートにぴったり合わせたいときはある。
そういうときは
h-screen
を指定することでheight: 100vhが指定される。
最大値、最小値
max-heightやmin-widthを指定したい時もある。
そういうときは
max-h-screen, min-w-12など、クラス名の先頭にmax-, min-を付けるだけ。
簡単。
かけるんレイアウト
参考
ポジション
<div class="absolute top-8 right-16">Text</div>
単純にクラスにabsoluteなどを追加することでポジションを指定することができる
FlexBox
<div class="bg-gray-100 text-center">
<div class="flex h-12 flex-row items-center gap-4">
<div class="flex-auto bg-orange-100">1</div>
<div class="flex-auto bg-orange-100">2</div>
</div>
<div class="flex h-40 flex-row gap-4">
<div class="flex flex-1 flex-col gap-4">
<div class="flex h-16 w-full flex-auto items-center justify-center bg-cyan-100">3</div>
<div class="flex h-12 w-full flex-auto items-center justify-center bg-cyan-100">4</div>
<div class="flex h-8 w-full flex-none items-center justify-center bg-cyan-100">6</div>
</div>
<div class="flex flex-1 flex-col-reverse gap-2">
<div class="flex h-32 w-full flex-1 items-center justify-center bg-emerald-300">7</div>
<div class="flex h-16 w-full flex-1 items-center justify-center bg-emerald-300">8</div>
<div class="flex h-8 w-full flex-none items-center justify-center bg-emerald-300">9</div>
</div>
</div>
</div>
正直この辺は素のFlexBoxの説明になりがちなので、紹介程度にとどめる
（自分自身がそこまでFlexBoxを理解できてないというのはナイショ）
-
flex:display: flexを指定 -
flex-row:flex-direction: rowを指定 -
flex-col:flex-direction: columnを指定 -
gap-{size}:gap: {0.25×size}remを指定 - flex-○○
-
flex-1:flex: 1 1 0%を指定 -
flex-initial:flex: 0 1 autoを指定 -
flex-auto:flex: 1 1 autoを指定 -
flex-none:flex: noneを指定 -
flex-[{grow}_{shrink}_{basis}]:flex: {grow} {shrink} {basis}を指定- ex.
flex-[1_2_50%]
- ex.
-
グリッドレイアウト
<div class="bg-gray-100 p-4">
<div class="grid grid-cols-3 gap-4">
<div class="bg-white">1</div>
<div class="bg-white">2</div>
<div class="bg-white">3</div>
<div class="bg-white">4</div>
<div class="bg-white">5</div>
</div>
</div>
-
grid:display: gridを指定 -
grid-cols-{num}: {num}に1行に表示するアイテム数を指定する
縦横比（アスペクト比）の固定
<div class="bg-gray-100 p-4">
<div class="aspect-square w-32 bg-white">Text</div>
</div>
aspect-squareを指定するとアスペクト比を1:1に指定することができる
他にも、aspect-videoで16:9を指定したり、
aspect-[{horizontal}/{vertical}]と独自に指定することもできる
ex. aspect-[4/3]
所感
レイアウト系のCSSはもとより少し苦手意識があったが、そこまで苦労することなく学習できた気がする。
そして、Tailwind CSSのデメリットとしてよく言われている（？）、クラスが多くなりすぎる、というのを少し体験できた。
ただ、複雑にならないように試行錯誤させて、ある意味で適切なコンポーネント化を助ける役割があったりするのかなぁとか思ったりもする。
そうでもないか。