TailwindCSSで、heightやwidthに任意の値を設定する方法

TailwindCSSで、heightやwidthに任意の値を設定する方法

任意の数値を指定できるArbitrary values

TailwindCSSは、あらかじめ数値などが決められたユーティリティクラスを使って、スタイリングしていきます。任意の数値を設定したクラスを作りたい時は、tailwind.config.jsに書く必要があります。直接、値を入力したいときは、Arbitrary valuesを使うと、任意の数値を指定することも可能です。※バージョン3以降で使える機能です。

書き方は、top-[117px] のように、ユーティリティクラスに[]をつけて、pxやrem,%で指定します。

HTML側で直接値を指定できるため、とても便利です。ぜひ使ってみてください!

<div class="mt-[50px] height-[50%] rounded-[12px] text-[1.5rem]">
  <!-- ... -->
</div>

まい

フロントエンドエンジニア目指して、勉強中です。

Tailwind CSSカテゴリの最新記事