Migrasi Sebenar ke Tailwind v4: Pengalaman Menaik Taraf Kami

Tailwind CSS telah menjadi satu standard untuk membina antara muka pengguna dengan pantas dan konsisten. Dengan versi 4 yang bakal tiba, banyak perubahan besar akan berlaku di sebalik tabir. Versi baharu ini, dikuasakan oleh enjin berasaskan Rust yang dipanggil Oxide, menjanjikan peningkatan prestasi yang ketara dan pengalaman pembangunan yang lebih mudah.

Di JRV Systems, kami mengambil keputusan untuk melakukan migrasi Tailwind v4 ke atas laman web kami sendiri, jrvsystems.app, untuk memahami impak sebenarnya. Ini bukan panduan teori; ia adalah ringkasan tentang apa yang kami hadapi, manfaat yang kami ukur, dan apa yang boleh dijangkakan oleh perniagaan dan pembangun perisian di Malaysia.

Perubahan Terbesar: tailwind.config.js Anda Kini Tiada

Perubahan paling ketara yang akan anda perasan ialah ketiadaan fail tailwind.config.js. Selama ini, fail JavaScript ini menjadi pusat utama untuk mengubah suai sistem reka bentuk anda—menetapkan warna, jarak, fon, dan plugin.

Dalam Tailwind v4, konfigurasi dipindahkan terus ke dalam fail CSS anda menggunakan pembolehubah CSS standard. Ini adalah satu anjakan fundamental. Daripada menggunakan objek JavaScript, anda kini mentakrifkan tema anda di bahagian atas fail CSS utama anda.

Berikut adalah contoh ringkas:

Sebelum (v3 dalam tailwind.config.js):

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#007bff',
      },
      spacing: {
        '128': '32rem',
      }
    }
  }
}

Selepas (v4 dalam styles.css):

@theme {
  --color-brand-blue: #007bff;
  --spacing-128: 32rem;
}

Pendekatan ini mempunyai dua kelebihan utama:

• Proses Binaan (Build) Lebih Mudah: Peralatan binaan anda tidak lagi perlu melaksanakan fail JavaScript semata-mata untuk memahami tema anda. Semuanya adalah CSS biasa, yang memudahkan alatan dan boleh mempercepatkan proses binaan awal.
• Kuasa CSS Asli: Anda boleh menggunakan fungsi CSS seperti color-mix() atau clamp() secara terus dalam pembolehubah tema anda, memanfaatkan ciri CSS moden tanpa jalan penyelesaian yang rumit.

Anda masih boleh mengakses nilai tema anda secara terus dalam CSS menggunakan fungsi @theme, seperti border-color: theme(colors.brand-blue);.

Di Sebalik Tabir: Enjin Oxide Baharu

Peningkatan prestasi dalam v4 sebahagian besarnya adalah hasil daripada Oxide, enjin pengkompil (compiler) baharu yang ditulis dalam Rust. Versi Tailwind sebelum ini menggunakan alatan berasaskan JavaScript seperti PostCSS untuk mengimbas fail anda dan menjana CSS yang diperlukan. Walaupun berkesan, ia tidak sepantas yang sepatutnya.

Oxide adalah jauh lebih laju. Bagi pembangun, ini bermakna kemas kini yang hampir serta-merta semasa pembangunan di persekitaran tempatan (local development). Apabila anda menyimpan fail, CSS baharu dijana dengan begitu pantas sehinggakan ia terasa lancar. Ini adalah satu penambahbaikan kualiti hidup yang memberikan kesan besar sepanjang kitaran hayat projek.

Manfaatnya juga dirasai di peringkat produksi. Oleh kerana Oxide lebih cekap dalam menjana dan membuang CSS yang tidak digunakan, fail output akhir menjadi lebih kecil. Selepas migrasi Tailwind v4 untuk jrvsystems.app, kami mengukur pengurangan saiz bundle CSS akhir kami sebanyak 30%. Bagi pengguna di Seremban dengan sambungan internet mudah alih yang lebih perlahan, saiz fail yang lebih kecil ini bermakna halaman web dimuatkan dengan lebih cepat.

Naik Taraf Gaya Praktikal: Container Queries

Tailwind v4 mengguna pakai ciri CSS moden, dan salah satu yang paling berkesan ialah 'container queries'. Secara tradisinya, kita menggunakan 'media queries' (md:, lg:) untuk mengubah reka letak berdasarkan saiz keseluruhan tetingkap pelayar (viewport) atau skrin.

'Container queries' membolehkan sesebuah komponen menyesuaikan diri berdasarkan saiz bekas induknya (parent container), bukan keseluruhan halaman. Ini adalah satu perubahan besar untuk membina komponen yang boleh diguna semula.

Bayangkan komponen kad yang ingin anda paparkan di kawasan kandungan utama yang lebar dan juga di bar sisi (sidebar) yang sempit. Dengan 'container queries', anda boleh mentakrifkan gaya yang hanya akan diguna pakai apabila kad tersebut berada di dalam bekas dengan saiz tertentu.

Tailwind v4 memperkenalkan sintaks varian baharu untuk ini:

• Pertama, anda tandakan elemen induk sebagai bekas 'query' dengan kelas utiliti container.
• Kemudian, anda gunakan varian @ pada elemen anak, seperti @lg:flex-row. Kelas ini hanya akan terpakai apabila bekas induk (bukan viewport) mencapai sekurang-kurangnya saiz breakpoint lg.

Ini menjadikan komponen lebih serba lengkap dan mudah dijangka, satu prinsip teras dalam pembangunan web moden yang kami hargai dalam projek kami, daripada laman e-dagang sehinggalah sistem SaaS untuk klinik.

Pengalaman Migrasi Kami di JRV Systems

Proses menaik taraf laman web kami sendiri adalah sangat terus-terang. Ia mengambil masa kira-kira setengah hari untuk pembangun kami menyelesaikan migrasi teras. Berikut adalah langkah-langkah yang kami ikuti:

1. Kemas Kini Pakej: Kami mengemas kini tailwindcss kepada versi alfa v4 terkini.
2. Cipta Fail CSS Baharu: Kami mencipta fail main.css yang baharu.
3. Terjemah Konfigurasi: Kami menterjemahkan nilai tema dari tailwind.config.js secara manual ke dalam blok @theme yang baharu dengan pembolehubah CSS.
4. Import dan Bina: Kami mengemas kini proses binaan kami untuk merujuk kepada fail CSS baharu dan menjalankan binaan. Enjin Oxide sudah bersepadu, jadi tiada persediaan rumit diperlukan.

Kebanyakan kelas utiliti sedia ada berfungsi tanpa sebarang perubahan. Usaha utama adalah menukar fail konfigurasi, yang merupakan tugas sekali sahaja. Untuk projek dengan tema yang sederhana kompleks, usaha ini boleh diuruskan.

Adakah Migrasi Tailwind v4 Berbaloi?

Berdasarkan pengalaman langsung kami, jawapannya adalah ya, dengan satu kaveat. Manfaat prestasi sahaja—baik dari segi kelajuan pembangunan mahupun saiz bundle produksi—menjadikannya satu naik taraf yang sangat menarik. Peralihan kepada konfigurasi asli CSS terasa seperti satu evolusi semula jadi yang mempermudahkan rantaian alatan (toolchain).

Satu-satunya sebab untuk menunggu adalah kestabilan. Sehingga akhir 2023, Tailwind v4 masih dalam versi alfa. Untuk aplikasi klien yang kritikal, seperti sistem pengebilan atau platform e-dagang yang sedang beroperasi, kami akan menasihatkan untuk menunggu versi stabil yang rasmi. Walau bagaimanapun, untuk projek baharu atau alatan dalaman, bermula dengan v4 sekarang boleh memberikan kelebihan jangka panjang yang besar. Masa depan CSS 'utility-first' adalah lebih pantas dan lebih mudah, dan migrasi Tailwind v4 adalah jalan untuk mencapainya.