Tailwind CSSでcalcが効かない時の確認事項について説明します。

Next.jsを例に説明します。以下のコードではCSSが正しく反映されません。

<div className="w-[calc(100% / 2 - 0.5rem)]">

スペースを消すか、スペースを_に置き換えると、正しく反映されます。

<div className="w-[calc(100%/2-0.5rem)]">
<div className="w-[calc(100%_/_2_-_0.5rem)]">