TailwindCSSで動的にbefore, afterのcontentを渡す方法

TailwindCSSで動的にbefore, afterのcontentを渡す方法

TailwindCSSで動的にbefore, afterのcontentを渡す方法が最近知ったのでメモ。

<div
  after-dynamic-value={"Hello World"}
  className={`after:content-[attr(after-dynamic-value)]
    after:absolute
    after:right-0
    after:text-gray-800
    `}
  />

これで動的にcontentを渡せる