Mẹo và Thủ Thuật Tailwind CSS để Phát Triển UI Nhanh Hơn

Designer working on UI components

Tailwind CSS đã thay đổi hoàn toàn cách các lập trình viên viết style. Thay vì phải chuyển qua lại giữa file HTML và CSS rồi nghĩ tên class, bạn có thể kết hợp các utility class trực tiếp trong markup. Kết quả là tốc độ phát triển nhanh hơn, không có CSS thừa trong production, và hệ thống thiết kế nhất quán — khi bạn nắm rõ các pattern.

Tư duy utility-first

Trước khi đi vào các mẹo cụ thể, hãy hiểu triết lý cốt lõi: mỗi class chỉ làm một việc. Thay vì:

.card {
  background-color: white;
  border-radius: 8px;
  padding: 16px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Bạn viết:

<div class="bg-white rounded-lg px-6 py-4 shadow-sm">

Style nằm ngay cạnh cấu trúc. Không cần chuyển đổi ngữ cảnh, không mất công nghĩ tên class.

Responsive design: breakpoint theo mobile-first

Tailwind sử dụng cách tiếp cận mobile-first. Các utility không có prefix áp dụng cho mọi kích thước màn hình; các utility có prefix ghi đè từ breakpoint đó trở lên:

<!-- Toàn chiều rộng trên mobile, nửa trên medium, một phần ba trên large -->
<div class="w-full md:w-1/2 lg:w-1/3">

<!-- Xếp dọc trên mobile, xếp ngang từ medium trở lên -->
<div class="flex flex-col md:flex-row gap-4">

<!-- Ẩn trên mobile, hiện từ large trở lên -->
<aside class="hidden lg:block">

Các breakpoint mặc định:

Prefix	Min-width
`sm:`	640px
`md:`	768px
`lg:`	1024px
`xl:`	1280px
`2xl:`	1536px

Dark mode

Bật dark mode trong tailwind.config.ts:

export default {
  darkMode: "class", // hoặc "media"
  // ...
}

Với chế độ "class", thêm class dark vào thẻ <html> khi người dùng bật dark mode. Với "media", nó tự động theo tùy chọn của hệ điều hành.

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-2xl font-bold">Hello World</h1>
  <p class="text-gray-600 dark:text-gray-400">Supporting text</p>
</div>

Trích xuất component với `@apply`

Khi một pattern lặp đi lặp lại, hãy trích xuất nó — nhưng dùng có chừng mực:

/* globals.css */
@layer components {
  .btn-primary {
    @apply inline-flex items-center px-4 py-2 rounded-md
           bg-blue-600 text-white font-medium text-sm
           hover:bg-blue-700 focus:outline-none focus:ring-2
           focus:ring-blue-500 focus:ring-offset-2
           transition-colors duration-150;
  }
}

Chỉ dùng @apply cho các UI component được tái sử dụng ở nhiều nơi. Với các style dùng một lần, hãy giữ các utility trực tiếp trong markup. Lạm dụng @apply sẽ tái tạo lại những vấn đề mà Tailwind được thiết kế để giải quyết.

Custom design token

Định nghĩa hệ thống thiết kế của bạn trong tailwind.config.ts:

export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
        },
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
      spacing: {
        18: "4.5rem",
        88: "22rem",
      },
      borderRadius: {
        "4xl": "2rem",
      },
    },
  },
}

Giờ bạn có thể dùng text-brand-500, font-mono, mt-18, v.v. — tất cả đều được hỗ trợ IntelliSense đầy đủ trong VS Code.

Chuyển đổi CSS hiện có sang Tailwind

Đang migrate một codebase cũ? Dùng Tailwind Converter của chúng tôi để dán CSS vào và nhận ngay các utility class Tailwind tương đương.

/* Input CSS */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 4rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
}

→ flex items-center justify-between px-16 py-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl

Giá trị tùy ý (Arbitrary values)

Cần một giá trị không có trong thang mặc định? Dùng dấu ngoặc vuông:

<!-- Giá trị pixel chính xác -->
<div class="w-[327px] mt-[13px]">

<!-- Màu tùy ý -->
<div class="bg-[#1a2332] text-[#e8f4f8]">

<!-- CSS variable tùy chỉnh -->
<div class="text-[var(--brand-color)]">

<!-- Grid phức tạp -->
<div class="grid grid-cols-[1fr_2fr_1fr]">

Hãy dùng những giá trị này có chừng mực — nếu bạn dùng cùng một giá trị tùy ý ở nhiều chỗ, hãy thêm nó vào config.

State variant

Tailwind đi kèm với đầy đủ các state variant bạn cần:

<!-- Hover, focus, active -->
<button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 focus:ring-2">

<!-- Trạng thái form -->
<input class="border-gray-300 focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">

<!-- Group hover (parent điều khiển child) -->
<div class="group">
  <h3 class="text-gray-900 group-hover:text-blue-600">Title</h3>
  <p class="hidden group-hover:block">Ẩn cho đến khi parent được hover</p>
</div>

<!-- Peer (trạng thái sibling) -->
<input type="checkbox" class="peer">
<label class="hidden peer-checked:block">Đã chọn!</label>

Hiệu suất: loại bỏ style không dùng

Trình biên dịch JIT (Just-In-Time) của Tailwind quét các file template và chỉ tạo ra đúng những class CSS bạn thực sự sử dụng. Bundle production thường chỉ nặng 5–15 KB CSS.

Đảm bảo đường dẫn content trong tailwind.config.ts bao phủ tất cả file template của bạn:

export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./content/**/*.mdx",
  ],
  // ...
}

Nếu bạn xây dựng tên class động (ví dụ: `bg-${color}-500`), Tailwind không thể phát hiện chúng. Hãy dùng safelist hoặc chuỗi class đầy đủ thay thế:

// ❌ Động — Tailwind không thể phát hiện "bg-red-500"
const cls = `bg-${color}-500`;

// ✅ Chuỗi class đầy đủ — có thể phát hiện được
const colorMap = { red: "bg-red-500", blue: "bg-blue-500" };

Plugin Typography

Plugin @tailwindcss/typography thêm class prose giúp định dạng nội dung HTML tùy ý một cách đẹp mắt — hoàn hảo cho bài viết blog, tài liệu, và nội dung xuất ra từ markdown:

<article class="prose prose-lg dark:prose-invert max-w-none">
  <!-- HTML được render từ markdown của bạn đặt ở đây -->
</article>

Plugin xử lý heading, danh sách, blockquote, code block, bảng và nhiều thứ khác với các giá trị mặc định hợp lý.

Danh sách các mẹo nhanh

Dùng gap-* trên container flex/grid thay vì margin trên các phần tử con
space-x-* và space-y-* để thêm khoảng cách giữa các phần tử anh em
divide-* để tạo border giữa các phần tử con mà không cần thêm markup
ring-* cho vòng focus (tốt hơn outline-* khi cần style tùy chỉnh)
truncate để cắt ngắn văn bản một dòng với dấu ba chấm
line-clamp-3 để giới hạn nhiều dòng (cần plugin typography)
sr-only để ẩn nhãn accessibility về mặt trực quan

Tailwind xứng đáng để đầu tư thời gian học. Bạn càng thành thạo kho từ vựng utility, bạn càng nhanh chóng cho ra đời những UI bóng bẩy và nhất quán.