前提
JIT で入ったこのあたりの記法です。
<!-- Sizes and positioning --> <img class="absolute w-[762px] h-[918px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" src="/crazy-background-image.png"> <!-- Colors --> <button class="bg-[#1da1f1]">Share on Twitter</button> <!-- Complex grids --> <div class="grid-cols-[1fr,700px,2fr]"> <!-- ... --> </div>
変数を使いたくなる
例えば以下のようにクラスを指定したくてもこれは実質できません*1。
const tekitou = 123 const widthClassName = `w-[${tekitou}px]` const imgTag = `<img class="${widthClassName}" ...>`
冒頭のページの Dynamic values に説明があるように「完全なタグ」を変数に入れる必要があります。上記の例で言えば w-[123px] を変数に入れる必要があります。変数展開してはいけません。
となると
したがって、冒頭のタイプの記法で変数で出し分けたいという場合には、予め使うことが分かっているもののなかから選択的に選ぶということになるかと思います。ユーザからパラメータで任意の数値を渡してもらい、それを利用する、ということは実質できません。
実質実質と言っているのは、一応抜け道があるからです。
tailwind.config.js に safelist というプロパティが設定できます。そこにたとえば ['w-[1px]', 'w-[2px]', 'w-[3px]', ...] のように考えうる数値を具体的に一つ一つ設定すればいいです。ただ、たとえば 1 から 1000 までの 1000個 の値を羅列するというのはちょっと無理やり過ぎます*2。正規表現を使えばいい、と思うでしょうが使えないのです。
多くの場合がそうであるように、なにか無理やりなことをする必要がある時は、そもそも方針が違ってたり別の実現方法があります。例えば上記の場合なら単に style="width: 123px" でもいけるはずです*3。
