Tag <pre> TailwindCSS tidak responsive di layar mobile

Sangat menjengkelkan, tag <pre></pre> Tailwindcss tidak bisa responsive di layar mobile. Layout konten akan melebar ke samping yang menyebabkan desain jadi rusak atau tidak responsive.

Susunan tag <pre> akan stretching hingga merusak responsive, bila struktur kode seperti berikut ini:

<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid gap-6 md:grid-cols-3">

  <article class="md:col-span-2 prose mx-auto">

    <h1>Lorem ipsum dolor sit amet</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra sapien nunc, dictum semper quam mollis id.</p>

    <pre>
      <code>
        <!--Your code... -->
      </code >
    </pre>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra sapien nunc, dictum semper quam mollis id.</p>

  </article>

  <aside class="p-4">
    <p>Lorem Ipsum...</p>
  </aside>

</main>

Hasil render akan melar di layar mobile, tampak seperti screenshoot berikut ini:

Apakah ini termasuk bug pada Tailwind CSS 3.2.7?

Setelah oprek sana-sini sembari mencari solusi dari Google, ternyata issue yang sama, banyak juga dialami oleh software engineer luar. Salah satunya https://github.com/tailwindlabs/tailwindcss-typography/issues/96.

Dimana letak permasalahannya:

Bila konten <pre> dibungkus dalam indukan flex dan grid akan mengalami stretching.

Solusinya:

Masalah tag <pre> ini memang tidak melulu “bug” yang ada dalam tubuh Tailwind CSS itu sendiri. Karena tag <pre> menampung source code termasuk spasi dan baris baru, bisa mengakibatkan teks melebar di layar mobile yang lebih sempit.

Untuk mengatasi masalah ini, perlu melakukan beberapa tindakan:

1. Menggunakan Kontainer Responsif: Bungkus tag <pre> dalam elemen kontainer yang responsif, seperti <div class="overflow-x-auto">, untuk mengizinkan pengguna untuk menggulir konten horizontal jika perlu.

<div class="overflow-x-auto">
  <pre>
    <!-- Konten Anda -->
  </pre>
</div>

2. Menggunakan Kelas CSS Kustom: Buat CSS kustom untuk menangani masalah ini dengan menambahkan properti CSS seperti white-space: pre-wrap; atau word-wrap: break-word; untuk mengendalikan perilaku teks dalam tag <pre>.

3. Menggunakan Media Query: Jika tata letak di layar mobile masih melebar, gunakan css media query untuk mengubah perilaku atau gaya tag <pre> di layar yang lebih kecil.

Demikian solusi untuk masalah tag <pre> yang tidak responsive di layar mobile.