Nội dung bài viết ▾
Dưới đây là bài hướng dẫn chi tiết – dễ hiểu – đầy đủ nhất để bạn cài đặt Tailwind CSS trên máy tính Windows và sử dụng cho các dự án như WordPress, HTML, Laravel…
⭐ TAILWIND CSS LÀ GÌ?
Tailwind CSS là một framework CSS giúp bạn tạo giao diện nhanh bằng các class có sẵn như:
<div class="bg-blue-500 text-white p-4 rounded-xl">
Xin chào!
</div>
Nó không giống Bootstrap (có UI sẵn), mà Tailwind giúp bạn tự tạo giao diện linh hoạt.
⭐ CÀI NODE.JS (BẮT BUỘC)
Vì Tailwind chạy bằng Node, nên bạn phải cài Node.js trước.
👉 Tải Node LTS:
https://nodejs.org
Cài xong → mở CMD gõ kiểm tra:
node -v
npm -v
Nếu ra version như:
v22.0.0
10.8.1
→ Là OK.
⭐ TẠO PROJECT ĐỂ CÀI TAILWIND
Bạn tạo một thư mục:
my-project/
└── index.html
Mở CMD trong thư mục này:
👉 Cách mở CMD đúng thư mục
- Vào thư mục → Click lên thanh địa chỉ
- Gõ:
cmd - Enter
CMD sẽ mở tại đúng vị trí.
⭐ KHỞI TẠO npm TRONG PROJECT
Gõ lệnh:
npm init -y
Lệnh này tạo file:
package.json
→ File này lưu danh sách các package bạn sắp cài.
⭐ CÀI TAILWIND CSS
Gõ:
npm install -D tailwindcss postcss autoprefixer
Sau đó tạo file config:
npx tailwindcss init -p
Nó sẽ tạo 2 file:
tailwind.config.js
postcss.config.js
⭐ TẠO FILE INPUT CHO TAILWIND
Trong thư mục dự án, tạo:
/src/input.css
Bên trong ghi:
@tailwind base;
@tailwind components;
@tailwind utilities;
⭐ SETUP TAILWIND CONFIG
Mở file tailwind.config.js, sửa thành:
module.exports = {
content: ["./*.html"],
theme: {
extend: {},
},
plugins: [],
}
Nếu bạn dùng WordPress, nội dung là:
content: [
"./*.php",
"./**/*.php",
],
⭐ CHẠY LỆNH BUILD TAILWIND
Build theo chế độ xem realtime:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Sau khi chạy:
- CSS output sẽ nằm ở
dist/output.css - Bạn gắn CSS này vào HTML hoặc WordPress theme
Ví dụ HTML:
<link rel="stylesheet" href="dist/output.css">
⭐ TẠO FILE index.html ĐỂ TEST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="dist/output.css" />
<title>Test Tailwind</title>
</head>
<body class="bg-gray-100 text-center p-10">
<h1 class="text-4xl font-bold text-blue-600">Tailwind hoạt động rồi!</h1>
</body>
</html>
Chạy file HTML lên và bạn sẽ thấy chữ xanh.
⭐ BUILD TAILWIND CHO SẢN PHẨM
Khi xong giao diện, build bản minify:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify
→ CSS nhẹ hơn gấp 20 lần.
⭐ SỬ DỤNG TAILWIND CHO WORDPRESS THEME/PLUGIN
Đây là phần nhiều bạn cần nhất:
- Tạo thư mục:
wp-content/themes/mytheme/ - Mở CMD → chạy:
npm init -y npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p - Tạo file:
assets/css/input.css - Build:
npx tailwindcss -i ./assets/css/input.css -o ./assets/css/style.css --watch - Gọi CSS trong functions.php:
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('tailwind', get_template_directory_uri() . '/assets/css/style.css');
});
- Upload lên hosting
(hosting chỉ cần file style.css → không cần Tailwind, không cần Node)
⭐ FAQ (Câu hỏi hay gặp về Tailwind CSS
❓ 1. Hosting có chạy Tailwind được không?
→ Không.
Tailwind phải chạy ở máy local.
Bạn chỉ upload file CSS đã build.
❓ 2. Có cần biết JS để dùng Tailwind không?
→ Không. Tailwind chỉ là CSS.
❓ 3. Có thể dùng Tailwind trực tiếp CDN không?
→ Có, nhưng:
- CSS rất nặng
- Không tối ưu
- Không dùng được plugin nâng cao
→ Không nên dùng cho sản phẩm thực tế.
❓ 4. Tailwind tốt hơn Bootstrap không?
→ Tùy project.
Bootstrap nhanh, Tailwind tự do và đẹp hơn.
Học thêm về Tailwind CSS tại đây: https://vnwebpro.com/tailwind-css/
Thảo luận