Pertama kali coba Tailwind CSS, saya langsung skeptis. "Ngapain nulis class sepanjang itu di HTML?" pikir saya. Tapi setelah pakai beberapa minggu, balik ke Bootstrap rasanya kayak balik ke jaman purba. Nah, di tahun 2026 ini Tailwind udah sampai versi 4, dan perubahannya cukup signifikan buat bikin workflow makin cepat.

Tailwind CSS v4 bukan sekadar update minor. Ada perubahan besar di arsitektur, konfigurasi, dan performa. Buat kamu yang masih pakai v3 atau baru mau mulai, ini saatnya upgrade. Artikel ini bakal bahas semua yang perlu kamu tahu tentang Tailwind CSS v4 dari setup sampai fitur-fitur baru yang bikin development makin produktif.

Apa yang Baru di Tailwind CSS v4

Tailwind v4 datang dengan beberapa perubahan fundamental yang bikin developer pada heboh:

• CSS-first configuration: Sekarang konfigurasi langsung di CSS, bukan di tailwind.config.js lagi. Kamu pakai directive @theme buat define custom values.
• Zero configuration: Install, import, langsung jalan. Nggak perlu bikin config file kalau cuma pakai default.
• Engine baru Oxide: Rewrite dari Rust yang bikin build time 10x lebih cepat dibanding v3.
• CSS-native features: Support container queries, 3D transforms, dan registered custom properties tanpa plugin.
• Automatic content detection: Tailwind v4 otomatis detect file yang perlu di-scan, nggak perlu define content paths lagi.

Yang paling kerasa bedanya itu kecepatan. Project gede yang dulu butuh 3-4 detik buat build, sekarang bisa selesai dalam hitungan milidetik. Serius, perbedaannya kayak naik motor vs naik pesawat.

Install Tailwind CSS v4

Setup Tailwind v4 sekarang jauh lebih simpel. Nggak ada lagi postcss.config.js yang ribet, nggak ada tailwind.config.js yang panjang. Tinggal install package-nya dan import di CSS.

Install via npm:

npm install tailwindcss @tailwindcss/vite

Kalau pakai Vite (recommended), tinggal tambahin plugin-nya di vite.config.js:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Terus di file CSS utama kamu, cukup satu baris:

@import "tailwindcss";

Selesai. Nggak perlu @tailwind base, @tailwind components, @tailwind utilities lagi. Nggak perlu bikin config file. Tailwind v4 otomatis scan semua file di project kamu dan generate utility classes yang dipakai aja.

Buat yang nggak pakai Vite, bisa pakai PostCSS juga:

npm install tailwindcss @tailwindcss/postcss

// postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Konfigurasi CSS-First dengan @theme

Ini nih perubahan paling signifikan. Dulu di v3, kamu harus bikin tailwind.config.js dan define theme di sana. Sekarang semuanya langsung di CSS pakai directive @theme.

Dulu (v3):

// tailwind.config.js (lama)
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#10b981',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}

Sekarang (v4):

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-sans: 'Inter', sans-serif;
}

Langsung bisa dipakai di HTML: class="bg-primary text-white font-sang". Nggak perlu extend, nggak perlu JavaScript config. Semua di CSS.

Buat nambah custom spacing:

@theme {
  --spacing-128: 32rem;
  --spacing-144: 36rem;
}

Sekarang bisa pakai class="w-128" atau "p-144" langsung.

Fitur Baru yang Bikin Produktif

Container Queries

Ini fitur yang lama ditunggu. Container queries memungkinkan kamu bikin responsive design berdasarkan ukuran parent container, bukan viewport. Tailwind v4 support ini secara native.

<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3">
    <!-- Content adapts to container, not viewport -->
  </div>
</div>

Prefix @container dan breakpoint @sm, @md, @lg, @xl, @2xl langsung tersedia tanpa plugin tambahan. Ini game-changer buat bikin komponen yang reusable di berbagai layout.

3D Transforms

Transform 3D sekarang built-in:

<div class="rotate-x-45 rotate-y-12 perspective-1000">
  <!-- 3D transformed element -->
</div>

Bisa bikin kartu yang flip, carousel 3D, atau efek visual lainnya tanpa nulis CSS custom.

Expanded Palette

Tailwind v4 nambahin lebih banyak warna default. Ada oklch color space yang bikin warna lebih konsisten di berbagai display. Kamu juga bisa pakai color-mix() langsung di utility classes.

Migrasi dari v3 ke v4

Proses migrasi sebenarnya nggak terlalu ribet kalau project kamu nggak terlalu kompleks. Langkah-langkahnya:

1. Update package: Install tailwindcss v4 dan plugin yang sesuai (Vite atau PostCSS)
2. Hapus config lama: tailwind.config.js dan postcss.config.js yang lama bisa dihapus
3. Update CSS entry point: Ganti @tailwind directives dengan @import "tailwindcss"
4. Pindahkan custom theme: Konversi theme config ke @theme directive di CSS
5. Update class names: Beberapa class berubah nama di v4, perlu di-check satu-satu

Ada beberapa class yang deprecated atau renamed di v4:

• decoration-slice -> bg-clip-text (untuk text gradient)
• flex-grow-* -> grow-*
• flex-shrink-* -> shrink-*
• overflow-ellipsis -> text-ellipsis

Tailwind nyediain upgrade tool buat bantu migrasi otomatis:

npx @tailwindcss/upgrade

Tool ini bakal scan project kamu, update class names yang berubah, dan convert config file ke format baru. Tapi tetap perlu review manual karena nggak semua perubahan bisa di-automate.

Tips Optimasi Performa

Walaupun Tailwind v4 udah kenceng dari sananya, ada beberapa trik buat bikin makin cepat:

• Pakai Vite: Plugin @tailwindcss/vite lebih cepat dari PostCSS karena bisa leverage caching dan incremental compilation.
• Avoid @apply berlebihan: @apply masih ada di v4, tapi kalau terlalu banyak bikin CSS output jadi besar. Pakai utility classes langsung di HTML kalau bisa.
• Tree-shake manual: Walaupun auto-detection udah canggih, kadang ada unused classes yang ke-scan. Pakai content option di @theme buat restrict scanning ke folder tertentu.
• Gunakan CSS layers: Tailwind v4 pakai CSS cascade layers, jadi specificity bukan masalah lagi. Nggak perlu !important buat override.

Contoh Project: Landing Page dengan Tailwind v4

Biar lebih jelas, ini contoh bikin landing page simpel pakai Tailwind v4. Mulai dari nol:

mkdir landing-page && cd landing-page
npm init -y
npm install tailwindcss @tailwindcss/vite vite

Buat vite.config.js:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

Buat src/style.css:

@import "tailwindcss";

@theme {
  --color-brand: #6366f1;
  --color-brand-light: #818cf8;
  --font-sans: 'Inter', system-ui, sans-serif;
}

Buat src/index.html:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Landing Page</title>
  <link rel="stylesheet" href="/src/style.css">
</head>
<body class="font-sang bg-gray-50 text-gray-900">
  <nav class="fixed top-0 w-full bg-white/80 backdrop-blur-md border-b border-gray-200 z-50">
    <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
      <span class="text-xl font-bold text-brand">BrandName</span>
      <div class="hidden md:flex gap-8">
        <a href="#features" class="hover:text-brand transition">Fitur</a>
        <a href="#pricing" class="hover:text-brand transition">Harga</a>
        <a href="#contact" class="hover:text-brand transition">Kontak</a>
      </div>
    </div>
  </nav>

  <section class="pt-32 pb-20 px-6">
    <div class="max-w-4xl mx-auto text-center">
      <h1 class="text-5xl md:text-6xl font-bold mb-6">
        Bangun Website <span class="text-brand">Lebih Cepat</span>
      </h1>
      <p class="text-xl text-gray-600 mb-8">
        Tailwind CSS v4 bikin styling jadi super efisien.
      </p>
      <div class="flex gap-4 justify-center">
        <a href="#" class="bg-brand text-white px-8 py-3 rounded-lg font-semibold hover:bg-brand-light transition">
          Mulai Sekarang
        </a>
        <a href="#" class="border border-gray-300 px-8 py-3 rounded-lg font-semibold hover:border-brand hover:text-brand transition">
          Pelajari Lagi
        </a>
      </div>
    </div>
  </section>
</body>
</html>

Jalankan dev server:

npx vite

Dan landing page kamu langsung jalan dengan styling lengkap. Semua utility classes di-scan otomatis, build output hanya berisi CSS yang benar-benar dipakai.

Kesimpulan

Tailwind CSS v4 adalah upgrade besar yang bikin framework ini makin enak dipakai. Konfigurasi CSS-first, engine Oxide yang super cepat, fitur container queries dan 3D transforms, semua bikin workflow development jauh lebih smooth.

Buat yang masih pakai v3, saran saya segera migrasi. Prosesnya nggak serumit yang dibayangkan, apalagi kalau pakai upgrade tool dari Tailwind. Benefitnya kerasa banget build time yang lebih cepat, config yang lebih simpel, dan fitur-fitur baru yang memudahkan.

Buat yang baru mau mulai pakai Tailwind, ini saat yang tepat. Langsung mulai dari v4, nggak perlu belajar v3 dulu. Setup-nya gampang, dokumentasinya lengkap, dan komunitasnya aktif banget.