💭

[TailWind] widthとheightをdocsを見ずに指定したい。

2023/04/14に公開

w-20、h-80がどれくらいのpxを指しているのかパッと見で分からず、何度も公式のdocsを確認することが多かったのでメモ

1rem(16px)がw-4を指すので、これを基準にすればいい。

  • w-8では2rem(16*2=32px)
  • w-12は3rem(16*3=48px)
  • w-16は4rem(16*4=64px)
  • w-20は5rem(16*5=80px)
  • .......
  • w-80は、20rem(16*20=320px)
  • w-96は、24rem(16*24=384px)

w-96はiPhoneSE(375px)より少し大きいと覚えておく。

Discussion