Tailwind CSS v4: Những Gì Thực Sự Thay Đổi và Có Nên Migrate Không | 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 {
  /* Xóa tất cả màu mặc định trước */
  --color-*: initial;
 
  /* Giờ chỉ định nghĩa màu của bạn */
  --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

/* v4 output — đơn giản hóa */
@layer theme, base, components, utilities;
 
@layer base {
  /* reset, preflight */
}
 
@layer components {
  /* class component của bạn */
}
 
@layer utilities {
  /* tất cả utility class được sinh ra */
}

css

@layer components {
  /* specificity: 0-1-0 */
  .card {
    padding: 1rem;
  }
}
 
@layer utilities {
  /* specificity: 0-1-0 — cùng specificity nhưng thắng vì utilities layer đến sau */
  .p-4 {
    padding: 1rem;
  }
}

// v3 — cách tiếp cận plugin
const plugin = require("tailwindcss/plugin");
 
module.exports = {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".text-balance": {
          "text-wrap": "balance",
        },
        ".text-pretty": {
          "text-wrap": "pretty",
        },
      });
    }),
  ],
};

html

<!-- đánh dấu parent là container -->
<div class="@container">
  <!-- responsive theo chiều rộng parent, không phải 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 card container -->
    <div class="@md/card:text-lg">...</div>
 
    <!-- query sidebar container -->
    <div class="@lg/sidebar:hidden">...</div>
  </div>
</div>

html

<!-- Component này thích ứng với BẤT KỲ container nào nó được đặt vào -->
<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">Post Title</h2>
      <p class="mt-2 text-sm @md:text-base text-gray-600">Post excerpt goes here...</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

<!-- mỗi child trừ cái cuối có 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 mọi thứ không bị disabled -->
<input class="not-disabled:hover:border-brand-500" />
 
<!-- phủ định data attribute -->
<div class="not-data-active:opacity-50">...</div>

html

<ul>
  <li class="nth-1:font-bold">Item đầu tiên — bold</li>
  <li class="nth-even:bg-gray-50">Hàng chẵn — bg xám</li>
  <li class="nth-odd:bg-white">Hàng lẻ — bg trắng</li>
  <li class="nth-[3n+1]:text-brand-500">Mỗi thứ ba+1 — brand color</li>
</ul>

html

<!-- tất cả paragraph trong div này, ở bất kỳ độ sâu nào -->
<div class="**:data-highlight:bg-yellow-100">
  <section>
    <p data-highlight>Cái này được highlight</p>
    <div>
      <p data-highlight>Cái này cũng vậy, lồng sâu hơn</p>
    </div>
  </section>
</div>

/* ĐÃ XÓA trong v4 */
bg-opacity-*     → dùng bg-black/50 (cú pháp slash opacity)
text-opacity-*   → dùng text-black/50
border-opacity-* → dùng border-black/50
flex-shrink-*    → dùng shrink-*
flex-grow-*      → dùng grow-*
overflow-ellipsis → dùng text-ellipsis
decoration-slice  → dùng box-decoration-slice
decoration-clone  → dùng 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 — trước
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 — sau */
@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": "XÓA — tích hợp sẵn rồi",
  "tailwindcss-animate": "kiểm tra hỗ trợ v4",
  "prettier-plugin-tailwindcss": "cập nhật bản mới nhất"
}

css

/* cách tiếp cận data attribute */
@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
/* media query — đây là mặc định, không cần khai báo */
@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);
}
 
/* Brand override */
.theme-acme {
  --brand-primary: #e11d48;
  --brand-light: #fb7185;
  --brand-dark: #9f1239;
}
 
.theme-globex {
  --brand-primary: #059669;
  --brand-light: #34d399;
  --brand-dark: #047857;
}

Metric	v3 (Node)	v4 (Oxide)	Cải thiện
Build ban đầu	4.280ms	387ms	11x
Incremental (sửa 1 file)	340ms	18ms	19x
Full rebuild (sạch)	5.100ms	510ms	10x
Khởi động dev server	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 (thay đổi CSS)	450ms	180ms	40ms

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

Bức Tranh Toàn Cảnh: v4 Thực Sự Là Gì

Cấu Hình CSS-First Với @theme

Override vs Extend Theme Mặc Định

Nhiều File Theme

Engine Oxide: Thực Sự Nhanh Hơn 10x

Tại Sao Nhanh Hơn Nhiều Như Vậy?

Tốc Độ Có Thực Sự Quan Trọng?

Tích Hợp Native @layer

Thêm Custom Utility

Custom Variant

Container Queries: Tích Hợp Sẵn, Không Cần Plugin

Sử Dụng Cơ Bản

Container Có Tên

Tại Sao Điều Này Quan Trọng

Variant Mới Thực Sự Hữu Ích

Variant starting:

Variant not-*

Variant nth-*

Variant in-* (Trạng Thái Parent)

Variant **: Deep Universal

Breaking Changes: Những Gì Thực Sự Hỏng

1. Định Dạng Cấu Hình

2. Đã Xóa Utility Deprecated

3. Thay Đổi Bảng Màu Mặc Định

4. Phát Hiện Content

5. Thay Đổi Plugin API

6. JIT Là Chế Độ Duy Nhất

7. Một Số Thay Đổi Cú Pháp Variant

Hướng Dẫn Migration: Quy Trình Thực Tế

Bước 1: Chạy Codemod Chính Thức

Codemod Xử Lý Tốt

Codemod KHÔNG Xử Lý

Bước 2: Sửa Cấu Hình PostCSS

Bước 3: Chuyển Đổi Cấu Hình Theme

Bước 4: Visual Regression Testing

Bước 5: Cập Nhật Dependency Bên Thứ Ba

Làm Việc Với Next.js

Cách PostCSS (Khuyến Nghị Cho Next.js)

Thứ Tự Import CSS

Dark Mode

Tương Thích Turbopack

Phân Tích Hiệu Năng Sâu: Không Chỉ Tốc Độ Build

Sử Dụng Bộ Nhớ

Kích Thước CSS Output

Tree Shaking Giá Trị Theme

Nâng Cao: Kết Hợp Theme Cho Multi-Brand

Những Gì Tôi Nhớ Từ v3

Bạn Có Nên Migrate?

Migrate Ngay Nếu:

Chờ Nếu:

Không Migrate Nếu:

Ý Kiến Thật Của Tôi

Bài viết liên quan

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-*` (Trạng Thái Parent)

Variant `**:` Deep Universal