Tailwind CSS cho người mới: Học utility-first chỉ trong 1 ngày

Tailwind CSS là gì? Vì sao nên dùng utility-first?

Tailwind CSS là gì?

Tailwind CSS là một framework CSS “utility-first” hiện đại, giúp bạn xây dựng giao diện nhanh chóng bằng cách kết hợp các class nhỏ, mỗi class đảm nhận một chức năng riêng biệt như padding, margin, màu sắc, font size,… Thay vì viết CSS tùy chỉnh cho từng component, bạn sẽ sử dụng các class có sẵn để dựng layout, style từng phần tử ngay trong file HTML hoặc JSX.

Khái niệm “utility-first” trong CSS hiện đại

“Utility-first” nghĩa là bạn tập trung vào sử dụng các class nhỏ lẻ (utility class) để mô tả trực tiếp giao diện, thay vì đặt tên class rồi định nghĩa style riêng cho từng cái. Điều này giúp code rõ ràng, dễ đọc và cực kỳ linh hoạt khi chỉnh sửa giao diện.

So sánh với các framework truyền thống (Bootstrap, Bulma…)

• Bootstrap/Bulma: Định nghĩa trước nhiều component (button, card, modal…) với style cố định, nếu muốn tuỳ biến sẽ phải override CSS hoặc viết lại class.
• Tailwind CSS: Không ép bạn dùng style cố định nào cả, mà cho bạn “bộ lego” utility class để lắp ghép giao diện theo ý mình. Bạn kiểm soát toàn bộ style, cực kỳ dễ tuỳ biến.

Ưu và nhược điểm của Tailwind CSS

Ưu điểm:

• Phát triển UI cực nhanh, không cần rời tay khỏi file HTML/JSX.
• Dễ bảo trì, nhất là với dự án nhiều dev.
• Rất linh hoạt và dễ tuỳ biến theme.
• Hạn chế style trùng lặp, loại bỏ CSS không dùng tới khi build (purge).

Nhược điểm:

• Lúc mới học có thể thấy class dài và rối.
• Chưa phù hợp cho những ai quen cách viết CSS truyền thống hoặc thích tổ chức style riêng biệt.

Cài đặt Tailwind CSS vào dự án

Hướng dẫn cài đặt Tailwind với các công cụ phổ biến

Tailwind CSS hỗ trợ hầu hết các stack frontend hiện đại như Vite, Create React App, Next.js, Vue.js…

Ví dụ cài đặt Tailwind vào dự án Vite (React):

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• Tạo 2 file cấu hình: tailwind.config.js và postcss.config.js.

Chỉnh sửa file tailwind.config.js để include source code:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: { extend: {} },
  plugins: [],
}

Import Tailwind vào CSS chính:

@tailwind base;
@tailwind components;
@tailwind utilities;

Khởi động lại dự án, bạn đã sẵn sàng dùng Tailwind.

Sử dụng CDN cho demo nhanh

Bạn có thể dùng Tailwind qua CDN cho các demo nhỏ, học nhanh:

<script src="https://cdn.tailwindcss.com"></script>

Lưu ý: CDN chỉ nên dùng cho demo, không khuyên dùng cho sản phẩm production vì thiếu tính năng tối ưu (purge unused CSS).

Cấu trúc class và cú pháp cơ bản trong Tailwind

Cách đọc, viết class utility của Tailwind

Các class của Tailwind tuân theo quy tắc:
property-modifier:value

Ví dụ:

• bg-blue-500 (background màu xanh dương cấp 500)
• text-center (căn giữa văn bản)
• p-4 (padding 16px)
• hover:bg-red-500 (background đỏ khi hover)

Cấu trúc: prefix, responsive, state, modifiers

• Prefix responsive:
  sm:, md:, lg:, xl: – Ví dụ: md:text-lg (font lớn hơn trên màn hình >=768px)
• State:
  hover:, focus:, active:, disabled:
• Modifier:
  Dùng để điều chỉnh giá trị (ví dụ: font-bold, rounded-lg)

Ví dụ thực tế: tạo button, card, layout đơn giản

Button:

<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  Submit
</button>

Giải thích:

• bg-blue-500: nền xanh
• text-white: chữ trắng
• px-4 py-2: padding ngang 16px, dọc 8px
• rounded: bo góc
• hover:bg-blue-600: nền xanh đậm khi hover

Card layout:

<div className="max-w-sm bg-white rounded-lg shadow p-4">
  <h3 className="font-bold text-lg mb-2">Tiêu đề Card</h3>
  <p className="text-gray-600">Mô tả ngắn nội dung card...</p>
</div>

Giải thích:

• max-w-sm: max-width nhỏ
• bg-white: nền trắng
• rounded-lg: bo góc lớn
• shadow: đổ bóng
• p-4: padding 16px
• mb-2: margin dưới cho tiêu đề
• text-gray-600: màu chữ xám nhạt

Tư duy utility-first: Xây giao diện không cần file CSS riêng

Giải thích cách suy nghĩ khi dùng utility-first

Với phương pháp utility-first, thay vì nghĩ:
“Tôi sẽ tạo một class tên là btn-primary và viết CSS cho nó”,
bạn sẽ nghĩ:
“Tôi cần một button nền xanh, chữ trắng, padding vừa phải, hover đổi màu”
→ sau đó kết hợp các class như bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 ngay trong HTML/JSX.

Việc này giúp bạn tập trung trực tiếp vào giao diện mong muốn mà không cần phải tạo tên class trung gian hoặc chuyển đổi qua lại giữa nhiều file CSS.

Ưu điểm khi không cần đặt tên class tùy biến

• Giảm thời gian nghĩ tên class (naming convention)
• Đảm bảo style nhất quán cho toàn team
• Khi cần chỉnh sửa, chỉ việc sửa trực tiếp class ở HTML/JSX, không cần lo cập nhật ở file CSS

Lưu ý về maintainability, khi nào nên tách component

• Với những component lớn, hoặc lặp lại nhiều lần, bạn nên tách thành component riêng trong framework (React, Vue) hoặc dùng directive (với @apply trong CSS) để tránh lặp lại class utility quá dài.
• Khi giao diện cần tuỳ biến động theo props/state, việc gắn utility class trực tiếp vào component sẽ linh hoạt hơn nhiều so với override CSS.

Ví dụ tách component React:

function Button({ children }) {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
      {children}
    </button>
  );
}

Khi cần thay đổi giao diện, chỉ cần update 1 nơi duy nhất.

Tùy biến theme và cấu hình Tailwind.config.js

Giới thiệu file cấu hình

File tailwind.config.js cho phép bạn tuỳ biến theme, màu sắc, font, breakpoints và thêm các utility class riêng cho dự án. Đây là “trái tim” của khả năng mở rộng Tailwind.

Thay đổi màu sắc, font, breakpoints…

• Mở rộng theme:

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#1d4ed8', // màu xanh chủ đạo
        'secondary': '#fbbf24', // màu vàng phụ
      },
      fontFamily: {
        'heading': ['Montserrat', 'sans-serif'],
      },
      screens: {
        'xs': '480px', // breakpoint nhỏ hơn mặc định
      }
    },
  },
}

• Sau khi cấu hình, bạn có thể dùng class mới như: bg-primary, text-secondary, font-heading, xs:text-sm…

Extend và custom utility theo dự án

Bạn có thể tự định nghĩa utility class hoặc plugin cho nhu cầu đặc biệt, ví dụ:

plugins: [
  require('@tailwindcss/typography'),
  function({ addUtilities }) {
    const newUtilities = {
      '.skew-10deg': { transform: 'skewY(-10deg)' },
    }
    addUtilities(newUtilities)
  }
]

Nhờ đó, Tailwind cực kỳ linh hoạt và phù hợp với các dự án lớn.

Responsive và Dark Mode với Tailwind

Cách dùng responsive utility

Tailwind tích hợp sẵn breakpoint phổ biến (sm, md, lg, xl, 2xl).
Cú pháp: [breakpoint]:[class]

Ví dụ:

<div class="p-2 md:p-4 lg:p-8">
  <!-- Padding nhỏ trên mobile, vừa trên tablet, lớn trên desktop -->
</div>

Thiết lập và sử dụng dark mode

Cấu hình:
Trong tailwind.config.js, bạn có thể bật dark mode theo class:

module.exports = {
  darkMode: 'class', // hoặc 'media'
}

Sử dụng:

<div className="bg-white dark:bg-gray-800 text-black dark:text-white">
  Nội dung có dark mode!
</div>

Khi thêm class dark vào thẻ cha (ví dụ <body class="dark">), toàn bộ nội dung con sẽ đổi style tương ứng.

Ví dụ thực hành

Toggle Dark Mode với React:

function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={dark ? "dark" : ""}>
      <button
        onClick={() => setDark(!dark)}
        className="mb-4 px-4 py-2 bg-gray-800 text-white rounded"
      >
        Toggle Dark Mode
      </button>
      <div className="bg-white dark:bg-gray-900 text-gray-800 dark:text-white p-6 rounded">
        Giao diện tự chuyển đổi Light/Dark mode!
      </div>
    </div>
  )
}

Kết hợp Tailwind với component framework (React, Vue…)

Sử dụng Tailwind trong React component

Với React, bạn chỉ cần cài đặt Tailwind như hướng dẫn, sau đó sử dụng class utility ngay trong thuộc tính className của component.

Ví dụ đơn giản:

function Alert({ type, message }) {
  const color = type === "error" ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700";
  return (
    <div className={`p-4 rounded ${color}`}>
      {message}
    </div>
  );
}

Giải thích:

• Kết hợp điều kiện JavaScript và utility class giúp giao diện thay đổi linh hoạt theo props.

Ví dụ với Next.js/Vue3

Với Next.js:
Không có gì khác biệt, chỉ cần cài Tailwind và dùng như trong React.

Với Vue 3:

<template>
  <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
    Submit
  </button>
</template>

• Các framework hiện đại như Svelte, Nuxt cũng hỗ trợ tích hợp Tailwind rất mượt mà.

Ưu điểm và lưu ý khi kết hợp

• Giúp tốc độ phát triển UI cực nhanh, không lo “leak style” giữa các component.
• Dễ tái sử dụng component, chỉ việc truyền props và cập nhật utility class.
• Lưu ý: Hãy chú ý không lặp lại các đoạn class dài ở nhiều nơi, có thể dùng @apply hoặc extract component để tối ưu.

Best practice, tránh code trùng lặp và plugin hữu ích

Tổ chức code, tránh lặp lại utility

• Khi nhận thấy nhiều component dùng cùng một tổ hợp utility, hãy:
  • Tách thành component riêng (React, Vue…)
  • Dùng @apply trong file CSS custom

Ví dụ:

/* styles.css */
.btn-primary {
  @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600;
}

<button className="btn-primary">Xác nhận</button>

Dùng @apply, extract component

• @apply giúp bạn “tái sử dụng” nhóm utility trong CSS truyền thống
• Extract component giúp code React/Vue sạch hơn, dễ bảo trì

Các plugin hay: Typography, Forms, Aspect Ratio…

• @tailwindcss/typography: Chỉnh typography đẹp, tối ưu SEO
• @tailwindcss/forms: Làm form đồng bộ, đẹp mà không cần tuỳ chỉnh nhiều
• @tailwindcss/aspect-ratio: Tạo layout giữ tỉ lệ vàng cho ảnh/video

Cài đặt plugin:

npm install @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio

// tailwind.config.js
plugins: [
  require('@tailwindcss/typography'),
  require('@tailwindcss/forms'),
  require('@tailwindcss/aspect-ratio'),
],

FAQ: Những câu hỏi thường gặp khi mới học Tailwind