1. Giới thiệu bài học
Trong bài học này, bạn sẽ học được:
- 2 cách chính để sử dụng Tailwind CSS:
- Cách nhanh nhất với CDN
- Cách chuyên nghiệp hơn với build tool (npm, PostCSS)
- Khi nào nên dùng mỗi cách
- Cách tạo project mẫu với từng phương pháp
2. Cách 1: Dùng Tailwind qua CDN
➤ Cách dùng
Chèn link CDN trực tiếp vào trong <head> của HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo Tailwind CDN</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
<h1 class="text-2xl font-bold text-blue-600">Chào bạn đến với Tailwind!</h1>
</body>
</html>
➤ Ưu điểm:
- Nhanh, không cần cài đặt
- Phù hợp với bài học, thử nghiệm hoặc demo nhỏ
➤ Nhược điểm:
- File CSS rất lớn, không tối ưu
- Không tùy biến được theme, không hỗ trợ build
- Không dùng được
@apply, plugin, dark mode nâng cao…
3. Cách 2: Cài Tailwind bằng npm và build tool
Cách này chuyên nghiệp hơn, thường dùng trong dự án thực tế.
➤ Bước 1: Tạo dự án
mkdir tailwind-demo
cd tailwind-demo
npm init -y
➤ Bước 2: Cài đặt Tailwind và công cụ build
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Lệnh trên sẽ tạo 2 file:
tailwind.config.js– dùng để cấu hìnhpostcss.config.js– cấu hình xử lý CSS
➤ Bước 3: Tạo file CSS đầu vào
Tạo file src/input.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
➤ Bước 4: Tạo HTML và build CSS
Ví dụ index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="dist/output.css" rel="stylesheet">
</head>
<body class="bg-white text-gray-800 p-4">
<h1 class="text-xl font-semibold text-green-600">Tailwind đã cài thành công!</h1>
</body>
</html>
Build CSS:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Giờ bạn có thể mở index.html bằng trình duyệt để xem kết quả.
4. Khi nào dùng CDN, khi nào dùng build?
| Mục đích | Nên chọn cách nào |
|---|---|
| Thử nghiệm nhanh | Dùng CDN |
| Dự án học tập nhỏ | CDN hoặc build đơn giản |
| Dự án thực tế | Cài bằng npm + build |
| Cần tùy biến sâu | Phải dùng build tool |
5. Tổng kết kiến thức
| Khái niệm | Giải thích |
|---|---|
| Tailwind CDN | Chèn trực tiếp JS từ Tailwind để dùng class CSS |
| tailwind.config.js | Nơi bạn có thể cấu hình màu, font, breakpoint tùy chỉnh |
| PostCSS + Autoprefixer | Dùng để xử lý và build CSS hiệu quả |
@tailwind directives | Cú pháp đặc biệt để import base, components, utilities của Tailwind |
--watch | Giúp Tailwind build lại CSS mỗi khi bạn chỉnh sửa file nguồn |
6. Tóm tắt bài học
- Bạn đã biết 2 cách dùng Tailwind:
- Dùng nhanh qua CDN: tiện lợi, không cấu hình
- Dùng build tool: chuyên nghiệp, tối ưu, tùy biến cao
- Tailwind khi build sẽ chỉ giữ lại những class bạn thực sự sử dụng => giúp giảm dung lượng file CSS cuối cùng
Thảo luận