Bài này hệ thống các nhóm lớp tiện ích dùng hằng ngày: khoảng cách (padding, margin, space, gap), kích thước, màu nền và chữ, typography, viền, bo góc, bóng đổ. Nắm quy luật đặt tên, bạn sẽ đoán được hầu hết các lớp.
Bạn sẽ học được
- Hiểu thang khoảng cách: 1 đơn vị = 0.25rem
- Dùng màu theo thang 50–950 và độ trong suốt /50
- Định dạng chữ: text-*, font-*, leading-*, tracking-*
- Dùng border, rounded, shadow, ring, giá trị tùy ý [ ]
Một số khái niệm
| Nhóm | Ví dụ | CSS tương ứng |
|---|---|---|
| Padding / margin | p-4, px-6, mt-2, -mt-1, mx-auto | padding: 1rem; margin-top: .5rem |
| Khoảng cách giữa con | space-y-3, gap-4 | margin giữa con / gap |
| Kích thước | w-64, w-1/2, w-full, max-w-xl, h-screen, size-10, min-h-dvh | width, max-width, height |
| Màu | bg-green-600, text-slate-700, border-red-300, bg-black/50 | màu theo thang, alpha 50% |
| Chữ | text-sm…text-5xl, font-semibold, leading-relaxed, tracking-wide, uppercase, truncate | |
| Viền, bo góc | border, border-2, rounded-lg, rounded-full | |
| Bóng, vòng | shadow-sm…shadow-2xl, ring-2 ring-sky-300 | |
| Giá trị tùy ý | w-[320px], bg-[#2e7d32], text-[17px], grid-cols-[200px_1fr] | giá trị bất kỳ |
Màu có 22 họ (slate, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose...), mỗi họ 11 sắc độ 50, 100, 200 … 900, 950. v4 dùng không gian màu OKLCH nên màu tươi và đều hơn.
Khoảng cách và kích thước
<div class="space-y-3">
<div class="flex gap-2"><div class="bg-sky-200 p-1">p-1</div><div class="bg-sky-300 p-2">p-2</div><div class="bg-sky-400 p-4">p-4</div><div class="bg-sky-500 px-8 py-2 text-white">px-8 py-2</div></div>
<div class="w-1/2 bg-green-200 p-2">w-1/2</div>
<div class="mx-auto w-64 bg-green-300 p-2 text-center">w-64 mx-auto</div>
<div class="w-[220px] bg-amber-200 p-2">w-[220px] giá trị tùy ý</div>
</div>Kết quả hiển thị
Màu và độ trong suốt
<div class="flex flex-wrap gap-1 text-[11px]">
<div class="bg-green-50 p-3">50</div><div class="bg-green-100 p-3">100</div><div class="bg-green-200 p-3">200</div><div class="bg-green-300 p-3">300</div><div class="bg-green-400 p-3">400</div><div class="bg-green-500 p-3 text-white">500</div><div class="bg-green-600 p-3 text-white">600</div><div class="bg-green-700 p-3 text-white">700</div><div class="bg-green-800 p-3 text-white">800</div><div class="bg-green-900 p-3 text-white">900</div><div class="bg-green-950 p-3 text-white">950</div>
</div>
<div class="mt-3 flex gap-2"><div class="bg-sky-600 p-3 text-white">sky-600</div><div class="bg-sky-600/50 p-3">sky-600/50</div><div class="bg-sky-600/20 p-3">/20</div><div class="border-2 border-rose-400 p-3 text-rose-700">border-rose-400</div></div>Kết quả hiển thị
Typography, viền, bóng
<p class="text-xs uppercase tracking-widest text-green-700 font-bold">Phát triển web</p>
<h2 class="text-3xl font-extrabold text-slate-900">Tailwind CSS</h2>
<p class="mt-1 max-w-prose leading-relaxed text-slate-600">Đoạn văn giãn dòng thoải mái, giới hạn độ rộng dễ đọc với max-w-prose.</p>
<p class="mt-1 w-56 truncate text-slate-500">Dòng chữ rất dài sẽ bị cắt bằng dấu ba chấm ở cuối</p>
<div class="mt-3 flex gap-3"><div class="rounded p-3 shadow-sm">rounded shadow-sm</div><div class="rounded-xl p-3 shadow-lg">rounded-xl shadow-lg</div><div class="rounded-full px-5 py-3 ring-2 ring-violet-400">rounded-full ring</div></div>Kết quả hiển thị
Mẹo hay
Rê chuột lên tên lớp trong VS Code (có IntelliSense) để xem CSS thật; đây là cách học nhanh nhất mối liên hệ lớp ↔ CSS.
Lưu ý
Hai lớp cùng thuộc tính (ví dụ p-2 p-4) không “cái sau thắng” theo thứ tự viết trong HTML mà theo thứ tự trong CSS sinh ra; tránh viết lớp xung đột.
Thực hành
- Tạo thẻ hồ sơ: ảnh tròn size-16, tên text-lg font-semibold, mô tả text-slate-500.
- Tạo bảng màu 5 sắc độ của màu thương hiệu bằng lớp có sẵn.
- Làm hộp thông báo nền amber-50, viền trái border-l-4 border-amber-400.
- Dùng 3 giá trị tùy ý [ ] cho kích thước, màu, cỡ chữ.
Tóm tắt bài học
- Thang khoảng cách: n × 0.25rem; space-*, gap-*.
- Màu họ-sắc độ (50–950), /alpha cho trong suốt.
- text-*, font-*, leading-*, tracking-*, truncate.
- border, rounded, shadow, ring; [giá trị tùy ý] khi cần.