Tailwind CSS マーカーとテキストの重なりを防ぐ方法

React を使ってリストを表示する際、ul タグのリストアイテムが長くなった場合、次の行のテキストがリストのマーカー（点や番号）と重なってしまうことがあります。
ここでは解決案の一例を解説します。

問題の概要

以下のようにリストを生成するコードがあります。

<ul className='list-disc list-inside'>
  {liveNames.map((liveName) => (
    <li key={liveName.id} className='py-2 marker:text-primary'>
      {liveName.name}
    </li>
  ))}
</ul>

list-inside によって、マーカーをリストアイテムの内側に配置します。
これにより、リストアイテムが複数行に渡った際、改行されたテキストがマーカーと重なりやすくなってしまいます。

モバイル表示でリストアイテムが複数行に渡ると、2行目以降のテキストがマーカーと重なっています。

解決案

<ul className='list-disc list-outside ml-6'>
  {liveNames.map((liveName) => (
    <li key={liveName.id} className='py-2 marker:text-primary'>
      {liveName.name}
    </li>
  ))}
</ul>

リストマーカーを外側に配置する

list-outside を使って、マーカーをテキストの外側に配置します。
マーカーとテキストが明確に分離されるため、基本的なレイアウト問題を解消します。

適切なマージンを設定する

ml-6 でリストアイテムの左にマージンを設定して、マーカーとテキストとの間に十分なスペースを確保します。これにより、マーカーとテキストが重ならないようにします。

マーカーとテキストが重ならないようになる

list-outside を使う場合はマーカーがテキストの外側に配置されてしまうため、マージンの設定は必須です。

ml-6を記載しなかった場合。裏の茶色はDevToolsの背景色

以上です。