Web Dev
Tailwind CSS v4: Engine Oxide dan Konfigurasi CSS-First
Juli 20269 menit baca
Foto oleh Pankaj Patel on Unsplash
Oxide adalah engine berkinerja tinggi baru yang menjadi inti Tailwind CSS v4, rilis Januari 2025. Jalur panasnya ditulis ulang sebagian besar dengan Rust dan bersandar pada fitur CSS native seperti cascade layer dan registered custom property alih-alih menirunya di JavaScript. Penulisan ulang inilah yang membuat build v4 jauh lebih cepat.
Terhadap benchmark rujukan v3.4, build penuh berjalan sekitar 3,78x lebih cepat (kira-kira 378ms ke 100ms) dan rebuild inkremental yang menambah CSS baru sekitar 8,8x lebih cepat (44ms ke 5ms). Rebuild inkremental tanpa CSS baru lebih dari 100x lebih cepat dan masuk skala mikrodetik, sekitar 192 mikrodetik. Tailwind meringkasnya sebagai build penuh hingga 5x lebih cepat dan build inkremental lebih dari 100x lebih cepat.
Konfigurasi CSS-first berarti design token Anda hidup di stylesheet, bukan di tailwind.config.js. Anda mengimpor Tailwind dengan satu baris dan mendeklarasikan warna, spacing, font, serta easing di dalam blok theme memakai sintaks custom property. Setiap nilai menjadi variabel CSS asli, dan konfigurasi JavaScript masih mungkin untuk kasus khusus tetapi harus dimuat eksplisit karena tidak lagi terdeteksi otomatis.
Jalankan tool upgrade otomatis dengan npx @tailwindcss/upgrade, yang butuh Node.js 20 atau lebih baru dan sebaiknya dijalankan di branch baru agar Anda bisa meninjau diff. Tool ini mengganti tiga direktif @tailwind menjadi satu impor tailwindcss, memigrasikan konfigurasi ke CSS, memindahkan plugin PostCSS ke @tailwindcss/postcss, dan menulis ulang utility yang berganti nama seperti shadow-sm menjadi shadow-xs.
Tailwind CSS v4 hanya menargetkan browser modern: Safari 16.4+, Chrome 111+, dan Firefox 128+. Ia bergantung pada fitur seperti at-rule @property dan color-mix() yang tidak punya polyfill. Jika Anda harus mendukung browser lama, panduan resminya adalah tetap di Tailwind v3.4.
Foto oleh Pankaj Patel on Unsplash
Ringkasan Utama
Tailwind CSS v4, rilis Januari 2025, adalah penulisan ulang total di atas engine Oxide berbasis Rust. Konfigurasi berpindah dari tailwind.config.js ke dalam CSS melalui direktif theme, deteksi konten menjadi otomatis, dan design token dikirim sebagai variabel CSS native. Build penuh berjalan hingga lima kali lebih cepat dan rebuild inkremental diukur dalam mikrodetik.
Saya sudah lama menjalankan portofolio ini di Tailwind v3.4, dan sampai sekarang masih baik-baik saja. Tetapi Tailwind CSS v4, yang rilis pada 22 Januari 2025, bukan sekadar pembaruan minor biasa — ini penulisan ulang penuh atas internal framework-nya. Memahami apa yang berubah tetap penting meski Anda belum berencana upgrade hari ini, karena model berpikir tentang cara Tailwind dikonfigurasi kini benar-benar berbeda.
Sorotan utamanya adalah engine baru yang tim sebut Oxide, ditulis sebagian besar dengan Rust, dipadukan dengan pergeseran yang dokumentasinya sebut sebagai konfigurasi CSS-first. Alih-alih file konfigurasi JavaScript, design system Anda kini hidup di dalam stylesheet. Tulisan ini membahas bagian yang penting dalam praktik: perubahan konfigurasi, deteksi konten otomatis, jalur migrasi, dan angka kecepatan build yang sebenarnya.
Di v3 Anda mengatur theme di tailwind.config.js — sebuah objek JavaScript untuk warna, spacing, font, dan breakpoint. Di v4 itu berpindah ke CSS. Anda mengimpor Tailwind dengan satu baris dan mendeklarasikan token di dalam blok theme, memakai sintaks custom property biasa. Setiap nilai yang Anda definisikan dipancarkan sebagai variabel CSS asli, sehingga token Anda tersedia untuk stylesheet atau inline style mana pun tanpa langkah build untuk membacanya.
@import "tailwindcss";
@theme {
--font-display: "Satoshi", sans-serif;
--color-brand-500: oklch(0.84 0.18 117.33);
--spacing-gutter: 2rem;
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
}Ini lebih dari sekadar kosmetik. Karena theme berupa CSS, warna memakai ruang warna oklch modern untuk gamut P3 yang lebih luas, dan nilai seperti font serta kurva easing bisa diakses sebagai variabel di mana saja dalam aplikasi Anda. Konfigurasi JavaScript masih mungkin untuk kasus khusus lewat direktif config eksplisit, tetapi tidak lagi terdeteksi otomatis — file CSS adalah sumber kebenaran.
v3 mewajibkan array content yang mendaftar setiap glob tempat nama kelas mungkin muncul; lupa satu path dan utility itu diam-diam hilang dari build. v4 mendeteksi file template Anda secara otomatis. Ia memindai proyek Anda secara heuristik, mengabaikan apa pun di .gitignore dan melewati file biner, sehingga folder baru langsung berfungsi. Saat Anda perlu menarik sumber di luar default, seperti library komponen di node_modules, Anda menambahkannya secara eksplisit dengan direktif source.
Deteksi otomatis bukan berarti Anda kehilangan kendali. Direktif source memungkinkan Anda menambah path yang dilewati heuristik, dan Anda bisa mengarahkannya ke paket di node_modules untuk memindai library design system yang Anda pakai. Perlakukan sebagai escape hatch, bukan default — untuk kebanyakan aplikasi Anda tidak menulis konfigurasi konten sama sekali.
Perubahan paling terlihat di hari pertama adalah stylesheet entry. Tiga direktif at-tailwind yang menyemai base, components, dan utilities menyatu menjadi satu impor tailwindcss. Plugin PostCSS juga berpindah ke paketnya sendiri, dan baik postcss-import maupun autoprefixer kini ditangani untuk Anda, jadi Anda bisa membuangnya dari pipeline.
/* v3: three directives in your entry CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* v4: one import, theme lives in CSS */
@import "tailwindcss";# Automated migration (requires Node.js 20+)
npx @tailwindcss/upgrade
# The PostCSS plugin now ships as its own package
npm i tailwindcss @tailwindcss/postcssAnda tidak harus melakukan ini secara manual. Tim menyediakan tool upgrade otomatis yang memperbarui dependensi, memigrasikan file konfigurasi ke CSS, dan menulis ulang utility yang berganti nama di seluruh template Anda. Ia butuh Node.js 20 atau lebih baru, dan dokumentasinya menyarankan menjalankannya di branch baru agar Anda bisa meninjau diff-nya. Harapkan juga kelas yang berganti nama — shadow-sm menjadi shadow-xs, dan modifier important pindah ke akhir kelas.
Oxide adalah alasan semua ini cepat. Tailwind Labs menulis ulang jalur panas dengan Rust dan bersandar pada fitur CSS native seperti cascade layer dan registered custom property alih-alih meniru mereka di JavaScript. Benchmark yang dipublikasikan terhadap v3.4 bersifat konkret, bukan samar:
v4 hanya menargetkan browser modern: Safari 16.4 ke atas, Chrome 111 ke atas, dan Firefox 128 ke atas. Ia bergantung pada fitur seperti at-rule property dan color-mix yang tidak punya polyfill. Jika Anda harus mendukung browser lama, tetaplah di v3.4 — ini alasan tunggal terbesar untuk tidak upgrade membabi buta.
| Aspek | Tailwind v3.4 | Tailwind v4.0 |
|---|---|---|
| Konfigurasi | tailwind.config.js JavaScript | Direktif theme di CSS |
| Stylesheet entry | Tiga direktif at-tailwind | Satu impor tailwindcss |
| Engine | JavaScript dan PostCSS | Oxide, ditulis dengan Rust |
| Deteksi konten | Glob content manual | Otomatis, dengan override source |
| Kecepatan build penuh | Baseline | Sekitar 3,8x lebih cepat |
| Target browser | Luas, browser lama | Safari 16.4+, Chrome 111+, Firefox 128+ |
Untuk portofolio ini, yang masih di v3.4, perhitungannya sederhana: batas browser sudah cukup untuk audiens saya, dan tool upgrade mengerjakan sebagian besar pekerjaan, jadi v4 adalah soal kapan, bukan apakah. Kemenangan sesungguhnya bukan kecepatan mentah yang jarang saya rasakan di situs kecil — melainkan design system akhirnya hidup di CSS, tempat seharusnya ia berada. Itulah perubahan yang layak direncanakan.