1. Giới thiệu Tailwind CSS

Tailwind CSS là một CSS framework theo hướng Utility-First, nghĩa là bạn xây giao diện bằng cách kết hợp các class nhỏ:

<div class="p-4 bg-blue-500 text-white rounded-lg">Hello</div>

Website chính thức: https://tailwindcss.com

Docs chính thức: https://tailwindcss.com/docs/installation/using-vite

Playground: https://play.tailwindcss.com

Tailwind cực hot năm 2025 vì:

  • Tốc độ xây UI nhanh
  • Tùy biến cao
  • File CSS nhẹ
  • Dễ responsive
  • Hỗ trợ dark mode cực tốt

2. Cài đặt Tailwind CSS

2.1. Cài với Vite (phổ biến nhất)

Bước 1 - Cài đặt

npm create vite@latest my-app
cd my-app
npm install

Bước 2 — Cài Tailwind

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

Bước 3 — Cấu hình tailwind.config.js

content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
]

Bước 4 - Import vào file CSS

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

Bước 5 - Chạy

npm run dev

3. Cấu trúc class trong Tailwind CSS

Tailwind có các nhóm class chính:

Spacing (khoảng cách)

p-4
m-2
px-6
py-3

Typography

text-xl
font-bold
text-gray-600
leading-relaxed

Flexbox & Grid

flex items-center justify-between
grid grid-cols-3 gap-4

Border & Radius

border border-gray-300
rounded-lg
rounded-full

Shadow

shadow
shadow-lg

Background

bg-red-500
bg-gradient-to-r from-blue-500 to-purple-500

4. Responsive trong Tailwind

Sử dụng prefix:

Prefix Kích thước
sm: ≥ 640px
md: ≥ 768px
lg: ≥ 1024px
xl: ≥ 1280px
2xl: ≥ 1536px

Ví dụ:

<p class="text-base md:text-xl lg:text-2xl">
  Responsive Tailwind
</p>

5. Dark Mode

Tailwind hỗ trợ dark mode theo class:

Bật dark mode trong config:

darkMode: 'class'

Sử dụng:

<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  Nội dung
</div>

Thêm class vào HTML:

<html class="dark">

6. Custom Theme (tùy biến)

Tailwind cho phép mở rộng màu, font, spacing,…

theme: {
  extend: {
    colors: {
      brand: '#4F46E5',
    },
    spacing: {
      128: '32rem',
    },
    fontFamily: {
      inter: ['Inter', 'sans-serif'],
    }
  }
}

Sử dụng:

<div class="text-brand font-inter p-128">Hello</div>

7. Plugin Tailwind CSS

Dùng plugin để mở rộng tính năng:

Cài đặt:

npm install @tailwindcss/forms @tailwindcss/typography

Thêm vào config:

plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
],

8. Tailwind với React

Có thể dùng với:

  • Next.js
  • Remix
  • Vite + React
  • Create React App

Ví dụ React component:

export default function Button() {
  return (
    <button className="px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700">
      Click me
    </button>
  );
}

9. Tailwind với Laravel

Laravel Mix/Vite hỗ trợ rất tốt.

Cài:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Cập nhật vite.config.js + view blade:

<div class="p-4 bg-indigo-600 text-white rounded-lg">
  Hello Laravel Tailwind
</div>

10. Ví dụ UI cơ bản với Tailwind

Button

<button class="px-5 py-2 bg-green-600 hover:bg-green-700 text-white rounded-xl shadow">
  Đăng ký ngay
</button>

Card

<div class="p-6 bg-white rounded-2xl shadow-xl">
  <h2 class="font-bold text-lg mb-2">Card Title</h2>
  <p class="text-gray-600">Đây là card Tailwind.</p>
</div>

Navbar

<nav class="flex items-center justify-between p-4 bg-gray-900 text-white">
  <h1 class="text-xl font-bold">Logo</h1>
  <ul class="flex gap-6">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

11. Best Practices (quan trọng)

1. Tạo component để tránh HTML quá dài

Dùng:

  • React components
  • Blade components
  • Vue components

2. Dùng plugin Prettier + Tailwind Sort

Giúp sắp xếp class tự động.

3. Tránh lặp đi lặp lại

Dùng @apply trong file CSS nếu cần:

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded-lg;
}

12. Kết luận

Tailwind CSS là lựa chọn tốt nhất năm 2025 cho:

  • Người mới
  • Frontend Developer
  • Website tốc độ cao
  • Startup, SaaS, Landing Page
  • React, Laravel, Next.js, Vue

Framework này mạnh mẽ, hiện đại, dễ dùng, cực nhanh và rất tối ưu SEO.