Tailwind CSSで任意の値を指定する

Tailwind CSSの文字サイズなどで、用意されていない任意の値を指定する方法をメモ。

サンプルコード

任意の値を指定したい場合、角括弧で囲って指定します。

<span class="text-[17px] lg:text-[25px] top-[75px]"></span>

以下のようなCSSが生成され、指定した値が適用されます。

.text-\[17px\] {
  font-size: 17px;
}
.top-\[75px\] {
  top: 75px;
}
@media (min-width: 1024px) {
  .lg\:text-\[25px\] {
    font-size: 25px;
  }
}