Tailwind CSS: khi nào hợp, khi nào không

Tailwind CSS là lựa chọn mặc định trong nhiều dự án React và Next.js mới. Bài này phân tích pros/cons thực tế, khi nào tốt, khi nào không.

Vì sao Tailwind thắng?

• RSC compatibility - không runtime cost
• Bundle nhỏ sau tree-shake (atomic class)
• Design token-driven qua config
• Ecosystem khổng lồ: shadcn/ui, Radix, Headless UI
• JIT compile nhanh, arbitrary value w-[437px]

Khi nào Tailwind tốt?

1. Project Next.js / React modern

RSC không thân thiện với CSS-in-JS runtime. Tailwind chạy hoàn toàn build-time -> no JS overhead, server render OK.

2. Team ship nhanh

tsx<div className="flex items-center gap-3 p-4 rounded-lg border border-gray-200 hover:bg-gray-50">
  <Avatar />
  <div className="flex-1 min-w-0">
    <p className="font-semibold truncate">An Nguyen</p>
    <p className="text-sm text-gray-500">an@example.com</p>
  </div>
</div>

Không jump file, không nghĩ class name. Refactor: xoá element = xoá CSS đi kèm.

3. Design system token-based

typescript// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: { 50: '#eff6ff', 500: '#3b82f6', 600: '#2563eb' },
        ink: { 900: '#111827', 950: '#030712' },
      },
      spacing: { '18': '4.5rem' },
      fontFamily: { sans: ['Inter', 'sans-serif'] },
    },
  },
}

Class bg-brand-500, text-ink-900 consistent toàn app. Đổi value config -> cập nhật khắp nơi.

4. shadcn/ui ecosystem

shadcn copy/paste component code thay vì npm install - anh control hoàn toàn. 40+ component accessible, beautiful, tweak được. De-facto cho React 2026.

Khi nào KHÔNG dùng Tailwind?

1. Content site thuần (Hugo, Jekyll, blog static)

Đơn giản hơn dùng vanilla CSS. Tailwind cần build pipeline - overkill cho 5 page.

2. Team không có build tool quen thuộc

Email template HTML, app legacy không có bundler - Tailwind khó setup. Vanilla CSS đơn giản hơn.

3. Component library publish ra ngoài

Consumer chưa chắc dùng Tailwind. Nên dùng CSS Modules hoặc Vanilla Extract - bundle CSS độc lập.

4. App đã invest sâu CSS-in-JS

Migration cost cao. Trừ khi gặp vấn đề RSC, giữ nguyên.

Anti-pattern phổ biến

tsx// ❌ Duplicate utility everywhere
<button className="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white font-semibold">Save</button>
// ... 50 button khác cùng class chains

// ✓ Extract component với cva
import { Button } from '@/components/ui/button'
<Button variant="primary">Save</Button>

tsx// ❌ Inline arbitrary mọi giá trị
<div className="w-[437px] h-[219px] mt-[13px]">...</div>

// ✓ Define trong theme nếu reuse, hoặc round to scale
<div className="w-md h-52 mt-3">...</div>

Config quan trọng nhất

typescript// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@your-design-system/**/*.js',  // include external lib
  ],
  darkMode: 'class',  // toggle qua <html class="dark">
  theme: {
    extend: {
      colors: { /* design token */ },
      animation: {
        'fade-in': 'fadeIn 0.3s ease-out',
      },
      keyframes: {
        fadeIn: { from: { opacity: '0' }, to: { opacity: '1' } },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
} satisfies Config

Dark mode

tsx<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
  <p className="text-gray-500 dark:text-gray-400">Subtle text</p>
</div>

Dùng next-themes hoặc useTheme hook để toggle class trên <html>.

Kết luận

Tailwind CSS hợp với phần lớn dự án React/Next.js mới. Đầu tư 1-2 ngày học + setup component layer (cva, shadcn) -> ship nhanh, bundle nhỏ, refactor dễ. Đọc thêm CSS architecture so sánh để cân nhắc với BEM/CSS-in-JS, và React Server Components để hiểu vì sao Tailwind thắng cho RSC.