Bài 1: Giới thiệu Tailwind CSS

Trong bài học đầu tiên, chúng ta sẽ tìm hiểu:

• Tailwind CSS là gì?
• Nó khác gì so với CSS thuần hoặc các framework khác như Bootstrap?
• Tư duy “utility-first” là gì?
• Vì sao nên học Tailwind?

1. Tailwind CSS là gì?

Tailwind CSS là một framework CSS hiện đại theo triết lý utility-first – nghĩa là bạn xây dựng giao diện bằng cách kết hợp các class nhỏ (utility classes) thay vì viết từng dòng CSS riêng.

Ví dụ:

📋 Copy<!-- Với Tailwind -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Click me
</button>

Thay vì viết CSS như:

📋 Copy.btn {
  background-color: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

Với Tailwind, bạn không cần tạo class tùy chỉnh — tất cả đã có sẵn bằng cách kết hợp các lớp như bg-blue-500, text-white, px-4, py-2, rounded.

2. Ưu điểm của Tailwind CSS

3. Tư duy Utility-First là gì?

Utility-first nghĩa là bạn sử dụng những class nhỏ, mỗi class làm một việc duy nhất, để “lắp ghép” giao diện.

Ví dụ:
mt-4 (margin-top), text-gray-700 (màu chữ), font-bold (đậm), text-lg (size lớn)…

Bạn không viết:

📋 Copy.title {
  margin-top: 1rem;
  color: #4a5568;
  font-weight: bold;
  font-size: 1.125rem;
}

Mà chỉ viết:

📋 Copy<h1 class="mt-4 text-gray-700 font-bold text-lg">Tiêu đề</h1>

4. Tại sao nên học Tailwind?

• Tiết kiệm thời gian viết CSS
• Dễ đọc, dễ maintain khi quen tay
• Cực kỳ linh hoạt khi responsive
• Dễ tích hợp với framework hiện đại (React, Vue, Laravel…)

5. Bảng tổng kết kiến thức

6. Tóm tắt bài học

• Tailwind CSS là framework theo hướng utility-first, giúp bạn tạo giao diện mà không cần viết CSS tùy chỉnh.
• Mỗi class trong Tailwind đại diện cho một thuộc tính CSS đơn lẻ.
• Ưu điểm: nhanh, rõ ràng, dễ bảo trì và phù hợp với các dự án hiện đại.