Tailwind CSS v4: Apa yang Baru dan Cara Migrasinya

Tailwind CSS v4: Revolusi di CSS Utility Framework

Tailwind CSS v4 adalah rewrite besar-besaran yang mengubah cara kerja Tailwind secara fundamental. Kalau kamu upgrade dari v3 tanpa baca-baca dulu, siap-siap kaget.

Perubahan Terbesar: Tidak Ada Lagi tailwind.config.js

Ini yang paling mengejutkan. Di v4, konfigurasi Tailwind dilakukan langsung di CSS:

/* globals.css */
@import "tailwindcss";

@theme {
  --font-sans: "Inter", sans-serif;
  --font-mono: "Fira Code", monospace;
  
  --color-brand: #0ea5e9;
  --color-brand-dark: #0284c7;
  
  --radius-card: 0.75rem;
  --spacing-section: 5rem;
}

Custom colors, fonts, spacing — semua di-define di CSS. tailwind.config.js tidak diperlukan lagi.

Engine Baru: Oxide

Tailwind v4 ditulis ulang dengan engine baru bernama Oxide yang menggunakan Rust untuk parsing. Hasilnya:

• Full build: 5x lebih cepat
• Incremental build: 100x lebih cepat
• Tidak perlu konfigurasi content paths — Tailwind otomatis detect file

Sintaks yang Berubah

<!-- v3 -->
<div class="bg-slate-900 text-slate-100">

<!-- v4 - masih sama, tapi ada shorthand baru -->
<div class="bg-slate--900 text-slate-100">

<!-- Arbitrary values sekarang bisa pakai custom property -->
<div class="mt-[--spacing-section]">

<!-- Group dan peer sekarang support arbitrary values -->
<div class="group/modal">
  <button class="group-hover/modal:opacity-100">

CSS Variables Sebagai Design Tokens

@theme {
  /* Semua nilai ini jadi CSS custom properties */
  --color-primary: oklch(60% 0.15 230);
  --color-secondary: oklch(70% 0.12 150);
}

Dan bisa dipakai di CSS biasa:

.custom-component {
  background: var(--color-primary);
  border-radius: var(--radius-card);
}

Cara Migrasi dari v3

# Install v4
npm install tailwindcss@next @tailwindcss/vite@next
# atau untuk Next.js
npm install tailwindcss@next @tailwindcss/postcss@next

# Jalankan upgrade codemod (otomatis convert sebagian besar)
npx @tailwindcss/upgrade@next

Cek perubahan breaking changes:

• ring-opacity-* → gunakan ring-black/50
• bg-opacity-* → gunakan bg-black/50
• text-opacity-* → gunakan text-black/50
• shadow-sm sekarang lebih besar dari sebelumnya

Tips Migrasi

1. Backup dulu project sebelum migrasi
2. Jalankan codemod, lalu review perubahannya
3. Cek halaman-halaman yang paling banyak style-nya
4. Test di mobile dan desktop

Semua project baru di Digital Uptime sudah pakai Tailwind v4. Build time yang lebih cepat sangat terasa di project besar.