Trong series này:

Thư viện Web phổ biến Bootstrap 5 Tailwind CSS Chart.js — Vẽ biểu đồ Mermaid.js — Sơ đồ từ văn bản anime.js — Animation Three.js — Đồ hoạ 3D trên web Swiper.js — Slider và Carousel
Sửa trang này

Tailwind CSS

Tailwind CSS là gì?

Tailwind CSS là utility-first CSS framework — không có components sẵn, thay vào đó bạn xây dựng giao diện bằng cách kết hợp các class nhỏ trực tiếp trong HTML. Ví dụ: flex, p-4, text-blue-600, hover:bg-gray-100.

Điểm khác biệt so với Bootstrap:

  • Bootstrap: dùng class component (btn, card, navbar)
  • Tailwind: dùng class utility (flex, gap-4, rounded-lg, shadow)

CDN Tailwind (chỉ dùng cho prototype/demo):

<script src="https://cdn.tailwindcss.com"></script>

Giao diện với Utility Classes

    Kết quả 
    <!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6 font-sans">

<!-- Alert -->
<div class="flex items-center gap-3 bg-blue-50 border border-blue-200 text-blue-800 rounded-lg p-4 mb-6">
  <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
  </svg>
  <span>Tailwind: xây dựng giao diện bằng cách ghép các class tiện ích trong HTML.</span>
</div>

<!-- Card grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow">
    <div class="h-28 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
      <span class="text-white text-3xl">🌐</span>
    </div>
    <div class="p-4">
      <span class="text-xs font-semibold text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">HTML/CSS</span>
      <h3 class="font-bold mt-2 text-gray-800">Lập trình Web cơ bản</h3>
      <p class="text-gray-500 text-sm mt-1">Xây dựng trang web từ nền tảng.</p>
      <button class="mt-3 w-full bg-blue-600 hover:bg-blue-700 text-white text-sm py-1.5 rounded-lg transition-colors">
        Bắt đầu học
      </button>
    </div>
  </div>

  <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow">
    <div class="h-28 bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center">
      <span class="text-white text-3xl">⚡</span>
    </div>
    <div class="p-4">
      <span class="text-xs font-semibold text-orange-600 bg-orange-50 px-2 py-0.5 rounded-full">JavaScript</span>
      <h3 class="font-bold mt-2 text-gray-800">JavaScript nâng cao</h3>
      <p class="text-gray-500 text-sm mt-1">ES6+, async/await, DOM, API.</p>
      <button class="mt-3 w-full bg-orange-500 hover:bg-orange-600 text-white text-sm py-1.5 rounded-lg transition-colors">
        Bắt đầu học
      </button>
    </div>
  </div>

  <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow">
    <div class="h-28 bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
      <span class="text-white text-3xl">🎨</span>
    </div>
    <div class="p-4">
      <span class="text-xs font-semibold text-green-600 bg-green-50 px-2 py-0.5 rounded-full">Tailwind</span>
      <h3 class="font-bold mt-2 text-gray-800">Tailwind CSS</h3>
      <p class="text-gray-500 text-sm mt-1">Utility-first framework hiện đại.</p>
      <button class="mt-3 w-full bg-green-600 hover:bg-green-700 text-white text-sm py-1.5 rounded-lg transition-colors">
        Bắt đầu học
      </button>
    </div>
  </div>
</div>

<!-- Stat cards -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4">
  <div class="bg-white rounded-lg p-4 text-center shadow-sm">
    <p class="text-2xl font-bold text-blue-600">1200+</p>
    <p class="text-gray-500 text-sm">Class tiện ích</p>
  </div>
  <div class="bg-white rounded-lg p-4 text-center shadow-sm">
    <p class="text-2xl font-bold text-green-600">3.4M</p>
    <p class="text-gray-500 text-sm">Weekly downloads</p>
  </div>
  <div class="bg-white rounded-lg p-4 text-center shadow-sm">
    <p class="text-2xl font-bold text-orange-500">v3.4</p>
    <p class="text-gray-500 text-sm">Phiên bản hiện tại</p>
  </div>
  <div class="bg-white rounded-lg p-4 text-center shadow-sm">
    <p class="text-2xl font-bold text-purple-600">0</p>
    <p class="text-gray-500 text-sm">Dependencies</p>
  </div>
</div>

</body>
</html>

    Bình luận