Zenn
Open1

animation時のtailwindの任意の値の謎

Next.js
React
Tailwind CSS
shimotanishimotani

Next.js 13とtailwind 3.3.3を使っている。
heightのanimationを作りたくて、以下のようにitemの高さに合わせて動的にheightを変更しようと思ったけど、styleにheightが適用されなかった。

const Test = () => {
  [open, setOpen] = useState<Boolean>(false);
  …
  return(
  …
  <ul className={`transition-[height] duration-200 ease-in-out ${open ? `h-[${item.length*2.25}rem]` : `h-0`}`}>
)}

ちなみに以下のようにべた書きだとうまくいった。

const Test = () => {
  [open, setOpen] = useState<Boolean>(false);
  …
  return(
  …
  <ul className={`transition-[height] duration-200 ease-in-out ${open ? `h-[4.5rem]` : `h- 
  0`}`}>
)}