Tailwind CSS Hướng Dẫn Từ A-Z Cho Người Mới

Tailwind CSS là utility-first CSS framework phổ biến nhất với 57% thị phần (State of CSS 2025), vượt Bootstrap. Thay vì viết CSS riêng, developer dùng class nhỏ trực tiếp trong HTML: flex items-center p-4 bg-white rounded-lg. Tailwind v4 (2025) nhanh hơn 10x nhờ Rust compiler và file production chỉ 10-30KB gzip.

Tại Sao Developer Chọn Tailwind?

4 lý do: (1) Không cần đặt tên class — CSS naming là 1 trong 2 bài toán khó nhất trong programming. (2) Consistent design — spacing, colors, typography đều từ design system. (3) Nhanh — code UI nhanh hơn CSS thuần 2-3 lần. (4) Nhỏ — tree-shaking tự động, chỉ CSS đã dùng mới vào bundle.

Tailwind vs Bootstrap vs CSS Thuần

Cài Đặt Tailwind CSS v4

Với Astro (framework website này dùng):

npm install @tailwindcss/vite

Thêm vào astro.config.mjs:

import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  vite: { plugins: [tailwindcss()] }
});

Import trong CSS global: @import "tailwindcss";

Responsive Design Với Tailwind

Tailwind dùng mobile-first breakpoints:

• Không prefix = mobile (< 640px)
• sm: = ≥ 640px
• md: = ≥ 768px
• lg: = ≥ 1024px
• xl: = ≥ 1280px

Ví dụ responsive: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 — 1 cột mobile, 2 tablet, 3 desktop.

Dark Mode

Thêm prefix dark: cho dark mode styles: bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100. Kích hoạt theo OS setting (media) hoặc toggle button (class strategy). Chi tiết: Dark Mode thiết kế giao diện.

Plugins Nên Cài

Chúng Tôi Xây Web tại Cái Răng, Cần Thơ thiết kế website với Tailwind CSS + Astro — giao diện custom đẹp, tốc độ Lighthouse 95+, responsive hoàn hảo trên mọi thiết bị.

Liên hệ tư vấn: Zalo 0817.771.184 | Hotline: 0817.771.184 | Form liên hệ