Tailwind CSS v4: Apa yang Benar-Benar Berubah dan Apakah Perlu Migrasi | Akousa

@starting-style

// v3 — tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a5f",
        },
      },
      fontFamily: {
        display: ["Inter Variable", "sans-serif"],
      },
      spacing: {
        18: "4.5rem",
        112: "28rem",
      },
      borderRadius: {
        "4xl": "2rem",
      },
    },
  },
};

css

@import "tailwindcss";
 
@theme {
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a5f;
 
  --font-display: "Inter Variable", sans-serif;
 
  --spacing-18: 4.5rem;
  --spacing-112: 28rem;
 
  --radius-4xl: 2rem;
}

css

@import "tailwindcss";
 
@theme {
  /* Hapus semua warna default terlebih dahulu */
  --color-*: initial;
 
  /* Sekarang definisikan hanya warna Anda */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a5f;
}

css

/* styles/theme/colors.css */
@theme {
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a5f;
  --color-brand-950: #172554;
}
 
/* styles/theme/typography.css */
@theme {
  --font-display: "Inter Variable", sans-serif;
  --font-body: "Source Sans 3 Variable", sans-serif;
  --font-mono: "JetBrains Mono Variable", monospace;
 
  --text-display: 3.5rem;
  --text-display--line-height: 1.1;
  --text-display--letter-spacing: -0.02em;
}

css

/* output v4 — disederhanakan */
@layer theme, base, components, utilities;
 
@layer base {
  /* reset, preflight */
}
 
@layer components {
  /* class komponen Anda */
}
 
@layer utilities {
  /* semua class utility yang dihasilkan */
}

css

@layer components {
  /* specificity: 0-1-0 */
  .card {
    padding: 1rem;
  }
}
 
@layer utilities {
  /* specificity: 0-1-0 — specificity sama tapi menang karena layer utilities lebih belakang */
  .p-4 {
    padding: 1rem;
  }
}

// v3 — pendekatan plugin
const plugin = require("tailwindcss/plugin");
 
module.exports = {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".text-balance": {
          "text-wrap": "balance",
        },
        ".text-pretty": {
          "text-wrap": "pretty",
        },
      });
    }),
  ],
};

html

<!-- tandai parent sebagai container -->
<div class="@container">
  <!-- responsif terhadap lebar parent, bukan viewport -->
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3">
    <div class="p-4">Card 1</div>
    <div class="p-4">Card 2</div>
    <div class="p-4">Card 3</div>
  </div>
</div>

html

<div class="@container/sidebar">
  <div class="@container/card">
    <!-- query container card -->
    <div class="@md/card:text-lg">...</div>
 
    <!-- query container sidebar -->
    <div class="@lg/sidebar:hidden">...</div>
  </div>
</div>

html

<!-- Komponen ini menyesuaikan diri dengan container APA PUN tempat ia diletakkan -->
<article class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-[200px_1fr] gap-4">
    <img
      class="w-full @md:w-auto rounded-lg aspect-video @md:aspect-square object-cover"
      src="/post-image.jpg"
      alt=""
    />
    <div>
      <h2 class="text-lg @lg:text-xl font-semibold">Judul Post</h2>
      <p class="mt-2 text-sm @md:text-base text-gray-600">Kutipan post di sini...</p>
      <div class="mt-4 hidden @md:flex gap-2">
        <span class="text-xs bg-gray-100 px-2 py-1 rounded">Tag</span>
      </div>
    </div>
  </div>
</article>

html

<!-- setiap child kecuali yang terakhir mendapat border -->
<div class="divide-y">
  <div class="not-last:pb-4">Item 1</div>
  <div class="not-last:pb-4">Item 2</div>
  <div class="not-last:pb-4">Item 3</div>
</div>
 
<!-- style semua yang tidak disabled -->
<input class="not-disabled:hover:border-brand-500" />
 
<!-- negasi data attributes -->
<div class="not-data-active:opacity-50">...</div>

html

<ul>
  <li class="nth-1:font-bold">Item pertama — bold</li>
  <li class="nth-even:bg-gray-50">Baris genap — bg abu-abu</li>
  <li class="nth-odd:bg-white">Baris ganjil — bg putih</li>
  <li class="nth-[3n+1]:text-brand-500">Setiap ketiga+1 — warna brand</li>
</ul>

html

<!-- semua paragraf di dalam div ini, di kedalaman apa pun -->
<div class="**:data-highlight:bg-yellow-100">
  <section>
    <p data-highlight>Ini mendapat highlight</p>
    <div>
      <p data-highlight>Ini juga, bersarang lebih dalam</p>
    </div>
  </section>
</div>

/* DIHAPUS di v4 */
bg-opacity-*     → gunakan bg-black/50 (sintaks slash opacity)
text-opacity-*   → gunakan text-black/50
border-opacity-* → gunakan border-black/50
flex-shrink-*    → gunakan shrink-*
flex-grow-*      → gunakan grow-*
overflow-ellipsis → gunakan text-ellipsis
decoration-slice  → gunakan box-decoration-slice
decoration-clone  → gunakan box-decoration-clone

// v3 plugin
plugin(function ({ addUtilities, theme }) {
  addUtilities({
    ".scrollbar-hide": {
      "-ms-overflow-style": "none",
      "scrollbar-width": "none",
      "&::-webkit-scrollbar": {
        display: "none",
      },
    },
  });
});

// v3 config — sebelum
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: "#60a5fa",
          DEFAULT: "#3b82f6",
          dark: "#1d4ed8",
        },
      },
      fontSize: {
        "2xs": ["0.65rem", { lineHeight: "1rem" }],
      },
      animation: {
        "fade-in": "fade-in 0.5s ease-out",
      },
      keyframes: {
        "fade-in": {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
      },
    },
  },
};

css

/* v4 CSS — sesudah */
@import "tailwindcss";
 
@theme {
  --color-brand-light: #60a5fa;
  --color-brand: #3b82f6;
  --color-brand-dark: #1d4ed8;
 
  --text-2xs: 0.65rem;
  --text-2xs--line-height: 1rem;
 
  --animate-fade-in: fade-in 0.5s ease-out;
}
 
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

json

{
  "@tailwindcss/typography": "^1.0.0",
  "@tailwindcss/forms": "^1.0.0",
  "@tailwindcss/container-queries": "HAPUS — sudah built-in sekarang",
  "tailwindcss-animate": "cek dukungan v4",
  "prettier-plugin-tailwindcss": "perbarui ke versi terbaru"
}

css

/* pendekatan data attribute */
@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
/* media query — ini adalah default, jadi Anda tidak perlu mendeklarasikannya */
@variant dark (@media (prefers-color-scheme: dark));

css

@import "tailwindcss";
 
@theme {
  --color-brand: var(--brand-primary, #3b82f6);
  --color-brand-light: var(--brand-light, #60a5fa);
  --color-brand-dark: var(--brand-dark, #1d4ed8);
}
 
/* Override brand */
.theme-acme {
  --brand-primary: #e11d48;
  --brand-light: #fb7185;
  --brand-dark: #9f1239;
}
 
.theme-globex {
  --brand-primary: #059669;
  --brand-light: #34d399;
  --brand-dark: #047857;
}

Metrik	v3 (Node)	v4 (Oxide)	Peningkatan
Build awal	4.280ms	387ms	11x
Incremental (edit 1 file)	340ms	18ms	19x
Full rebuild (bersih)	5.100ms	510ms	10x
Dev server start	3.200ms	290ms	11x

Variant	Min-width
`@sm`	24rem (384px)
`@md`	28rem (448px)
`@lg`	32rem (512px)
`@xl`	36rem (576px)
`@2xl`	42rem (672px)

Setup	v3 + Webpack	v3 + Turbopack	v4 + Turbopack
Cold start	4.8s	2.1s	1.3s
HMR (perubahan CSS)	450ms	180ms	40ms

Metrik	v3	v4
Peak memory (build)	380MB	45MB
Steady-state (dev)	210MB	28MB

Gambaran Besar: Apa Sebenarnya v4 Itu

Konfigurasi CSS-First dengan @theme

Override vs. Extend Tema Default

Beberapa File Tema

Engine Oxide: Benar-Benar 10x Lebih Cepat

Mengapa Jauh Lebih Cepat?

Apakah Kecepatan Benar-Benar Penting?

Integrasi Native @layer

Menambahkan Custom Utilities

Custom Variants

Container Queries: Built-In, Tanpa Plugin

Penggunaan Dasar

Named Containers

Mengapa Ini Penting

Variant Baru yang Benar-Benar Berguna

Variant starting:

Variant not-*

Variant nth-*

Variant in-* (State Parent)

Variant Deep Universal **:

Breaking Changes: Apa yang Benar-Benar Rusak

1. Format Konfigurasi

2. Utility yang Deprecated Dihapus

3. Perubahan Palet Warna Default

4. Deteksi Konten

5. Perubahan Plugin API

6. JIT Adalah Satu-Satunya Mode

7. Beberapa Perubahan Sintaks Variant

Panduan Migrasi: Proses yang Sebenarnya

Langkah 1: Jalankan Codemod Resmi

Apa yang Ditangani Codemod dengan Baik

Apa yang TIDAK Ditangani Codemod

Langkah 2: Perbaiki Konfigurasi PostCSS

Langkah 3: Konversi Konfigurasi Tema

Langkah 4: Visual Regression Testing

Langkah 5: Perbarui Dependensi Pihak Ketiga

Bekerja dengan Next.js

Pendekatan PostCSS (Direkomendasikan untuk Next.js)

Urutan Import CSS

Dark Mode

Kompatibilitas Turbopack

Deep Dive Performa: Melampaui Kecepatan Build

Penggunaan Memori

Ukuran Output CSS

Tree Shaking Nilai Tema

Lanjutan: Menyusun Tema untuk Multi-Brand

Yang Saya Rindukan dari v3

Haruskah Anda Migrasi?

Migrasi Sekarang Jika:

Tunggu Jika:

Jangan Migrasi Jika:

Pendapat Jujur Saya

Artikel Terkait

Regex Cheat Sheet 2026 — Regular Expressions Made Simple

How to Compress Images Without Losing Quality: The Complete 2026 Guide

Variant `starting:`

Variant `not-*`

Variant `nth-*`

Variant `in-*` (State Parent)

Variant Deep Universal `**:`