Tailwind CSSで変数内の文字列に改行を入れる

変数に入れた文字列を改行する方法について共有しておきたいと思います。

めちゃくちゃ簡単なので結論書きます。

page.tsx

export default function Home() {
  const text = "これは一行目です。\nこれは二行目です。";
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="whitespace-pre-wrap">{text}</div>
    </main>
  );
}

これだけです。

ポイントは

1. 改行したい場所に改行コードの\nを入れる。
2. JSXでclassNameにwhitespace-pre-wrapを追加する。

whitespace: pre-wrapはスペースや改行をブラウザに反映させるプロパティーです。