Tailwind v4 Preflight Mematikan `alignleft`/`alignright` Gambar WordPress — Pulihkan Tanpa `clear:both` di Heading

Gejalanya muncul beberapa menit setelah saya menambahkan Tailwind v4 ke sebuah custom theme WordPress. Tidak ada error di console, tidak ada warning di build — cuma satu hal yang langsung terasa salah begitu saya buka salah satu artikel: semua gambar yang harusnya mengambang di kiri atau kanan teks tiba-tiba menumpuk vertikal. Editor masih menampilkan layout yang benar, tapi di frontend semua gambar alignleft dan alignright jadi block penuh, teks tidak lagi membungkus di sampingnya, dan postingan yang dulu rapi sekarang berantakan.

Markup yang dihasilkan Gutenberg tidak berubah sama sekali. Masih persis seperti ini:

<figure class="wp-block-image alignleft">
  <img src="/wp-content/uploads/foto.jpg" alt="" />
</figure>
<h2>Subjudul yang harusnya membungkus di kanan gambar</h2>
<p>Paragraf yang harusnya mengalir di samping gambar...</p>

Class alignleft masih ada di HTML. Jadi yang hilang bukan markup-nya, tapi CSS yang menggerakkannya. Dan satu-satunya hal baru di dalam pipeline saya adalah Tailwind.

Kenapa ini terjadi

Tailwind v4 mengirimkan preflight — reset CSS bawaannya — secara default begitu Anda meng-import stylesheet utamanya. Preflight ini agresif dengan sengaja: tujuannya membersihkan inconsistency antar-browser supaya utility class jadi prediktabel. Dua aturan dari preflight itulah yang membunuh alignment WordPress.

Pertama, preflight menyetel semua gambar jadi display: block. Kedua, ia menghapus margin default dari elemen. Masalahnya, alignment WordPress sepenuhnya bergantung pada float plus margin tertentu di sisi gambar — dan secara historis, banyak dari aturan itu "cukup ada" karena style editor bawaan dan default browser. Ketika preflight memaksa img { display: block } dan menggunduli margin, float dari .alignleft/.alignright kehilangan konteks yang biasa membuatnya bekerja, dan gambar aligncenter/alignwide/alignfull kehilangan margin auto serta lebar yang membuatnya melebar atau ke tengah.

Inti masalahnya: sebuah CSS reset diam-diam menghapus style editor bawaan WordPress. WordPress tidak pernah mendeklarasikan ulang aturan alignment-nya di tempat yang aman dari preflight, jadi begitu reset masuk, class-class itu cuma jadi nama tanpa efek. Tidak ada yang "rusak" dalam arti error — semuanya justru bekerja persis seperti yang diminta Tailwind.

Perbaikannya

Solusinya bukan mematikan preflight (saya butuh reset itu untuk sisa theme), melainkan mengembalikan aturan alignment yang dihapus preflight — secara bedah, hanya yang perlu:

.alignleft {
  float: left;
  margin: 0 1.5em 1em 0;
}
 
.alignright {
  float: right;
  margin: 0 0 1em 1.5em;
}
 
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.alignwide {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
 
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

Begitu lima aturan ini masuk, alignleft dan alignright kembali mengambang, teks membungkus lagi, dan alignwide/alignfull kembali melebar seperti seharusnya.

Lalu datang godaan yang harus Anda lawan. Ketika float kembali aktif, Anda akan melihat heading sesekali "menempel" di samping gambar yang mengambang — H2 berikutnya naik ke samping gambar alih-alih turun di bawahnya. Reaksi refleks saya pertama adalah menyiram clear: both ke semua heading, atau ke semua descendant di dalam section konten. Jangan.

Aturan clear: both di heading memang mendorong H2/H3 turun ke bawah gambar yang mengambang — tapi itu justru memecah parity antara editor dan frontend. Editor TinyMCE tidak meng-clear heading-nya, jadi begitu Anda memaksa clear di frontend, tata letak yang Anda lihat saat menulis tidak lagi sama dengan tata letak yang dilihat pembaca. Float yang seharusnya membungkus heading jadi terpotong. Anda menukar satu masalah visual dengan inkonsistensi yang lebih membingungkan.

Tempat yang benar untuk meng-clear float hanya satu: <hr>, alias blok Separator. Itu memang dimaksudkan sebagai pemisah, jadi clear di situ aman dan masuk akal:

hr {
  clear: both;
}

Sentuhan terakhir adalah ritme heading. Setelah reset, margin atas heading saya tidak cocok dengan yang dirender editor, sehingga jarak vertikal di frontend terasa beda dari yang ditulis di TinyMCE. Saya menyelaraskannya ke ritme TinyMCE — sekitar 1.4em di H2, bukan 2em yang sempat saya pakai:

h2 {
  margin-top: 1.4em;
}

Angka itu bukan estetika sembarangan; itu yang membuat postingan yang dirender cocok dengan apa yang dilihat penulis di editor. Tujuan akhirnya selalu parity: yang Anda tulis adalah yang dibaca orang.

Pelajaran

Sebuah CSS reset bisa diam-diam menghapus style editor bawaan WordPress, dan ia tidak akan memberi tahu Anda — tidak ada error, hanya layout yang pelan-pelan salah. Ketika Anda menambahkan Tailwind (atau reset apa pun) ke theme WordPress lama, asumsikan alignment Gutenberg akan jebol, lalu tambahkan kembali aturan alignleft/alignright/aligncenter/alignwide/alignfull secara bedah. Dan tahan dorongan untuk menyiram clear: both ke mana-mana hanya untuk merapikan float: clear hanya pada <hr>, biarkan float membungkus heading seperti yang dilakukan editor, dan setel ritme margin heading agar frontend cocok dengan TinyMCE. Reset memberi Anda baseline yang bersih — tugas Anda mengembalikan hal-hal yang memang sengaja dibawa WordPress, tanpa kebablasan.