Migrasi Sebenar ke Tailwind v4: Pengalaman Kami di JRV Systems

Tailwind v4 kini dalam versi alfa, dan ia mewakili satu anjakan seni bina yang signifikan untuk kerangka kerja CSS yang popular ini. Ia bukan sekadar menambah utiliti baharu, tetapi memikirkan semula keseluruhan enjin dan proses konfigurasi. Untuk memahami impak dunia sebenar, kami telah melakukan migrasi Tailwind v4 ke atas laman web kami sendiri, jrvsystems.app. Artikel ini memperincikan penemuan kami—perubahan praktikal, peningkatan prestasi, dan apa maknanya untuk projek anda yang seterusnya.

Apa Sebenarnya yang Terlibat dalam Migrasi Tailwind v4

Perubahan paling ketara dalam Tailwind v4 ialah peralihan daripada fail konfigurasi berasaskan JavaScript (tailwind.config.js). Sebaliknya, konfigurasi kini diuruskan terus di dalam fail CSS utama anda menggunakan sintaks CSS standard. Ini adalah perubahan asas yang mempermudahkan proses 'build'.

Sebelum ini, anda akan mentakrifkan tema anda seperti ini dalam tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#3490dc',
      },
    },
  },
}

Dengan v4, anda mentakrifkan nilai yang sama sebagai 'CSS custom properties' di dalam blok @theme dalam fail CSS utama anda:

@tailwind base;
@tailwind components;
@tailwind utilities;

@theme {
  --color-brand: #3490dc;
}

Pendekatan ini mempunyai dua faedah utama. Pertama, tema anda kini berada bersama CSS anda, menjadikannya lebih bersepadu. Kedua, untuk kebanyakan projek, ia menghapuskan keperluan untuk PostCSS sebagai dependensi 'build', kerana Tailwind kini boleh memproses CSS secara terus. Konfigurasi JavaScript lama masih disokong untuk persediaan kompleks yang melibatkan 'plugin', tetapi kaedah CSS-dahulu yang baharu adalah laluan yang disyorkan.

Enjin Oxide: Kelajuan yang Boleh Dirasai

Di sebalik tabir, Tailwind v4 dikuasakan oleh enjin baharu yang dipanggil Oxide, yang ditulis dalam Rust. Matlamat utama Oxide ialah kelajuan, baik semasa pembangunan mahupun dalam 'build' produksi. Perbezaannya amat ketara.

Semasa pembangunan dengan kerangka kerja seperti Next.js, 'build' semula CSS kini berlaku hampir serta-merta. Tetapi metrik yang lebih mengagumkan ialah output produksi akhir. Selepas migrasi Tailwind v4 kami di jrvsystems.app, kami mengukur penambahbaikan berikut:

• Saiz Bundle Lebih Kecil: Fail CSS kami yang telah di-gzip menyusut kira-kira 30%. Ia turun dari sekitar 18kb kepada hanya 12.5kb. Bagi pengguna di Malaysia yang mengakses laman web kami melalui rangkaian mudah alih, pengurangan data ini merupakan peningkatan prestasi yang bermakna.
• Masa 'Build' Lebih Pantas: 'Build' produksi penuh adalah jauh lebih pantas. Walaupun ini berbeza mengikut saiz projek, enjin baharu ini menyusun CSS yang diperlukan dengan lebih cekap, menjimatkan beberapa saat atau bahkan minit dari masa proses CI/CD.

Peningkatan prestasi ini bukan sekadar penambahbaikan kecil; ia adalah kelebihan teras seni bina baharu ini.

Menggunakan @theme untuk Konfigurasi Terus dalam CSS

Arahan @theme adalah aplikasi praktikal bagi model konfigurasi baharu. Ia membolehkan anda mentakrif atau mengubah mana-mana bahagian sistem reka bentuk Tailwind menggunakan 'CSS custom properties'. Ini merangkumi lebih daripada sekadar warna.

Berikut ialah cara anda boleh menyesuaikan fon, jarak, dan 'breakpoint':

@theme {
  --font-family-sans: 'Inter', 'system-ui', sans-serif;
  --spacing-128: 32rem; /* Menambah utiliti 'w-128' atau 'p-128' baharu */
  --breakpoint-3xl: 1920px; /* Mentakrif varian skrin '3xl:' baharu */
}

Kaedah ini terasa lebih selari dengan amalan CSS moden. Daripada mempelajari struktur objek JavaScript yang spesifik, anda menggunakan standard yang difahami oleh pelayar. Ia juga menjadikan sistem reka bentuk anda lebih telus, kerana sesiapa sahaja yang memeriksa fail CSS anda boleh melihat pembolehubah tema teras di satu tempat.

Ciri-ciri Asli: 'Container Queries' dan Lain-lain

Tailwind v4 menyepadukan ciri-ciri CSS moden yang sebelum ini memerlukan 'plugin' atau tidak disokong sama sekali. Ini menjadikan kerangka kerja ini lebih berkuasa dan serba lengkap.

Antara penambahan utama ialah:

• 'Container Queries': Anda kini boleh menggayakan elemen berdasarkan saiz bekas induknya, bukan hanya 'viewport'. Ini diaktifkan secara lalai dengan varian @, seperti @lg:text-lg, yang akan diguna pakai apabila bekas (bukan skrin) berada pada 'breakpoint' lg. Ini adalah satu perubahan besar untuk membina komponen yang benar-benar boleh diguna semula.
• Varian has-*: Pseudo-kelas :has() CSS kini disokong melalui varian seperti group-has-hover:opacity-100. Ini membolehkan anda menggayakan elemen induk berdasarkan keadaan atau kehadiran anak-anaknya.
• Pengesanan Kandungan Tanpa Konfigurasi: Tailwind v4 secara automatik mengimbas fail projek anda untuk nama kelas. Anda tidak perlu lagi mengkonfigurasi laluan content dalam fail konfigurasi anda, mempermudahkan persediaan, terutamanya untuk 'monorepo'.

Penambahan ini bermakna kurang kebergantungan pada pakej luaran dan pengalaman pembangunan yang lebih lancar, menggunakan ciri-ciri terkini yang ditawarkan oleh platform web.

Laluan Migrasi untuk Aplikasi Sebenar

Untuk laman web kami, jrvsystems.app, proses migrasi Tailwind v4 adalah sangat lancar. Kelas utiliti teras tidak berubah, jadi tidak perlu mengubah kod komponen. Keseluruhan proses mengambil masa kurang dari satu jam.

Langkah-langkahnya adalah seperti berikut:

1. Kemas Kini Dependensi: Kami mengemas kini tailwindcss kepada versi alfa v4 terkini dalam fail package.json kami.
2. Terjemah Konfigurasi: Kami menterjemah secara manual nilai-nilai dari tailwind.config.js sedia ada kepada 'CSS custom properties' di dalam fail app.css global kami di bawah blok @theme.
3. Buang Konfigurasi Lama: Setelah nilai tema dipindahkan, kami memadam fail tailwind.config.js.
4. Uji 'Build': Kami menjalankan server pembangunan dan 'build' produksi untuk memeriksa sebarang masalah visual. Kami tidak menemui sebarang masalah.

Tugas terbesar hanyalah memetakan kunci objek JavaScript dari konfigurasi lama kepada nama 'CSS custom property' yang baharu. Dokumentasi rasmi Tailwind menyediakan panduan yang jelas untuk ini. Untuk projek dengan tema yang sederhana kompleks, ini adalah tugas sekali sahaja yang mudah.

Adakah Migrasi Tailwind v4 Berbaloi?

Berdasarkan pengalaman kami, ya. Untuk projek baharu, memulakan dengan v4 adalah pilihan yang jelas. Persediaannya lebih mudah, dan prestasinya lebih unggul.

Untuk projek sedia ada, naik taraf ini sangat menarik. Pengurangan 30% dalam saiz bundle CSS adalah faedah ketara yang meningkatkan pengalaman pengguna, terutamanya dalam pasaran yang mengutamakan peranti mudah alih seperti Malaysia. Masa 'build' yang lebih pantas juga meningkatkan produktiviti pembangun. Usaha migrasi adalah rendah untuk kebanyakan projek, menjadikan pulangan pelaburan sangat tinggi. Tailwind v4 terasa seperti sebuah kerangka kerja yang matang, mengguna pakai standard web dan menyampaikan alat yang lebih pantas dan cekap untuk membina antara muka moden.