任意の数値を指定できる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>
