tailwindが一部だけ効かない

Posted at 2024-09-20

うっかりミスでtailwindが効かない事があったので共有。

tailwindが効かない書き方

<button
    className={`bg-sky-400 text-white w-[72px]${
        isDisabled ? "opacity-50" : ""
    }`}
>
    クリック
</button>

修正

<button
    className={`bg-sky-400 text-white w-[72px] ${
        isDisabled ? "opacity-50" : ""
    }`}
>
    クリック
</button>

$の後ろにスペースを入れていないと効かなくなります、、ご注意を。