Bài 10. Dự án: landing page với Tailwind CSS

Một số khái niệm

Quy trình làm giao diện với Tailwind: phác bố cục từ điện thoại → thêm variant md:, lg: → thêm hover:, focus: → kiểm tra dark: → tách phần lặp thành thành phần (vòng lặp hoặc component).

Hero và tính năng

<header class="sticky top-0 z-10 border-b border-slate-200 bg-white/80 backdrop-blur"><div class="mx-auto flex max-w-5xl items-center gap-6 px-4 py-3"><b class="text-green-700">Tự Học Tin</b><nav class="hidden gap-5 text-sm text-slate-600 sm:flex"><a href="#">Khóa học</a><a href="#">Bảng giá</a></nav><a class="ml-auto rounded-lg bg-green-600 px-3 py-1.5 text-sm text-white" href="#">Đăng ký</a></div></header>
<section class="bg-linear-to-br from-green-700 to-teal-600 px-4 py-14 text-center text-white">
  <span class="rounded-full bg-white/15 px-3 py-1 text-xs ring-1 ring-white/30">Miễn phí · 12 bài</span>
  <h1 class="mx-auto mt-4 max-w-2xl text-3xl font-extrabold sm:text-5xl">Thiết kế giao diện nhanh với Tailwind CSS</h1>
  <p class="mx-auto mt-3 max-w-xl text-green-50/90">Từ lớp tiện ích đến dự án thực tế, có ví dụ chạy trực tiếp.</p>
  <div class="mt-6 flex justify-center gap-3"><a class="rounded-xl bg-white px-5 py-3 font-semibold text-green-700 shadow hover:bg-green-50" href="#">Bắt đầu học</a><a class="rounded-xl px-5 py-3 font-semibold ring-1 ring-white/60 hover:bg-white/10" href="#">Xem nội dung</a></div>
</section>
<section class="mx-auto grid max-w-5xl gap-4 px-4 py-10 sm:grid-cols-3">
  <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><div class="grid size-10 place-items-center rounded-xl bg-green-100 text-green-700">⚡</div><h3 class="mt-3 font-semibold">Nhanh</h3><p class="text-sm text-slate-500">Không rời HTML để viết CSS.</p></div>
  <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><div class="grid size-10 place-items-center rounded-xl bg-sky-100 text-sky-700">📐</div><h3 class="mt-3 font-semibold">Nhất quán</h3><p class="text-sm text-slate-500">Thang khoảng cách, màu chung.</p></div>
  <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><div class="grid size-10 place-items-center rounded-xl bg-amber-100 text-amber-700">📱</div><h3 class="mt-3 font-semibold">Responsive</h3><p class="text-sm text-slate-500">sm: md: lg: ngay trong lớp.</p></div>
</section>

Bảng giá

<section class="mx-auto grid max-w-4xl gap-4 sm:grid-cols-3">
  <div class="flex flex-col rounded-2xl p-6 ring-1 ring-slate-200"><h3 class="font-semibold">Tự học</h3><p class="mt-2 text-3xl font-bold">0đ</p><ul class="mt-4 space-y-1 text-sm text-slate-600"><li>✓ 12 bài học</li><li>✓ Ví dụ trực quan</li></ul><a class="mt-6 rounded-lg py-2 text-center text-sm font-semibold text-green-700 ring-1 ring-green-600" href="#">Chọn gói</a></div>
  <div class="flex flex-col rounded-2xl bg-slate-900 p-6 text-white ring-2 ring-green-500"><div class="flex justify-between"><h3 class="font-semibold">Có hướng dẫn</h3><span class="rounded-full bg-green-500 px-2 py-0.5 text-xs">Phổ biến</span></div><p class="mt-2 text-3xl font-bold">199k</p><ul class="mt-4 space-y-1 text-sm text-slate-300"><li>✓ Chấm dự án</li><li>✓ Nhóm hỏi đáp</li></ul><a class="mt-6 rounded-lg bg-green-500 py-2 text-center text-sm font-semibold" href="#">Chọn gói</a></div>
  <div class="flex flex-col rounded-2xl p-6 ring-1 ring-slate-200"><h3 class="font-semibold">Lớp học</h3><p class="mt-2 text-3xl font-bold">Liên hệ</p><ul class="mt-4 space-y-1 text-sm text-slate-600"><li>✓ Cho trường, nhóm</li></ul><a class="mt-auto rounded-lg py-2 text-center text-sm font-semibold text-green-700 ring-1 ring-green-600" href="#">Liên hệ</a></div>
</section>

Xuất bản

# Vite
npm run build            # CSS đầu ra chỉ chứa lớp đã dùng, thường chỉ vài KB
# CLI
npx @tailwindcss/cli -i src/input.css -o dist/app.css --minify