Seberapa cepat Tailwind CSS v4 dibanding v3?

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.

Apa itu konfigurasi CSS-first di Tailwind v4?

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.

Bagaimana cara migrasi proyek dari Tailwind v3 ke v4?

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: Engine Oxide dan Konfigurasi CSS-First

Q: Apa itu engine Oxide di Tailwind CSS v4?

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.

Q: Browser mana yang didukung Tailwind CSS v4?

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.

Tailwind CSS v4 adalah penulisan ulang total di atas engine Oxide berbasis Rust: konfigurasi theme CSS-first, deteksi konten otomatis, dan build hingga 5x lebih cepat.

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.

Konfigurasi CSS-first menggantikan file konfigurasi

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.

Deteksi konten otomatis dan variabel CSS native

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.

Migrasi dari v3: satu import, satu perintah

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/postcss

Anda 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.

Engine Oxide dan angka kecepatannya

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:

Build penuh berjalan sekitar 3,78 kali lebih cepat — kira-kira dari 378ms turun ke 100ms pada benchmark rujukan.
Rebuild inkremental yang menambah CSS baru sekitar 8,8 kali lebih cepat, turun dari 44ms ke 5ms.
Rebuild inkremental tanpa CSS baru lebih dari 100 kali lebih cepat dan masuk ke skala mikrodetik — sekitar 192 mikrodetik pada angka yang dipublikasikan.

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.

Tailwind v3.4 vs v4.0 sekilas

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.

Sumber