Tailwindcss で、決められたサイズではなく、自分で決めた任意のサイズを指定します。

以下のコードでは、横幅が広がりすぎているので、横幅を 240px に狭めたいと考えています。

return <div className="text-lg text-white bg-sky-700">今日の天気は、晴れ</div>

image2

Tailwindcss で任意のサイズを指定するには、『[]』を使用します。

横幅を 240px にしたい場合は、w-[240px]とします。

return (
  <div className="w-[240px] text-lg text-white bg-sky-700">
    今日の天気は、晴れ
  </div>
)

ブラウザを確認すると、

image3

image4

横幅が 240px になりました。

『[]』を使用すると、calc で計算式を使うことができます。

例えば、calc(10vw+40px)を指定すると、

<div className="w-[calc(10vw+40px)] text-lg text-white bg-sky-700">
  今日の天気は、晴れ
</div>

image5

image6

計算結果のサイズが表示されました。

ブログ一覧