Tailwind CSSでcalcが効かない時の確認事項

CSS
投稿日: カテゴリー HTML/CSSタグ

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)]'>

広告