Tailwind, Radix & shadcn/ui · Part 2 — Core Utilities & Layout

Phần 1 đã cho bạn mô hình tư duy và một setup v4 chạy được. Giờ ta xây vốn từ. Đây là 80% Tailwind bạn dùng 80% thời gian — spacing, sizing, typography, màu, và hai cỗ máy layout (Flexbox & Grid). Nắm chắc phần này là bạn dựng được gần như mọi UI tĩnh mà không cần mở docs. Mục tiêu của bài: sau khi đọc xong, mỗi utility bạn gặp đều “đọc” được ngay ra dòng CSS nó sinh ra.

Cách học bài này như một frontend engineer

Đừng học Tailwind bằng cách cố nhớ 500 class. Hãy học theo ý định layout:

Khi debug layout, hãy hỏi theo thứ tự này:

1. Cha đang là layout engine gì? block, flex, hay grid?
2. Trục chính là trục nào? flex-row thì ngang, flex-col thì dọc.
3. Item có được phép co không? Nếu text dài phá layout, thử min-w-0.
4. Breakpoint đang áp từ đâu? md: là từ 48rem trở lên, không phải chỉ tablet.
5. Khoảng cách đến từ đâu? gap, margin của con, hay space-y sinh margin tự động?

Đây là checklist nhỏ nhưng cứu bạn khỏi 80% bug layout trong app thật.

1. Thang spacing — nhịp của toàn UI

Gần như mọi utility liên quan tới khoảng cách (padding, margin, gap, cả width/height ở dạng số) đều rút từ một thang số chung, với quy luật duy nhất:

n → n × 0.25rem (và 0.25rem = 4px ở font-size gốc mặc định 16px). Nên muốn ra pixel, cứ nhân 4: p-4 → 16px, p-6 → 24px, p-8 → 32px.

Đây là bảng tra đầy đủ những bước hay gặp (thang còn tiếp tục lên 64, 72, 80, 96):

Thang này áp cho mọi tiền tố spacing. Đây là toàn bộ họ utility dùng chung thang đó:

<div class="px-4 py-2">padding-inline 1rem, padding-block 0.5rem</div>
<div class="mt-6 mb-2">trên 1.5rem, dưới 0.5rem</div>
<div class="mx-auto max-w-sm">căn giữa một khối có chiều rộng tối đa</div>
<div class="-mt-4">kéo lên đè 1rem (margin âm)</div>

space-x/space-y vs gap — cơ chế bên dưới

Hai thứ này trông giống nhau (“tạo khoảng giữa các con”) nhưng sinh CSS hoàn toàn khác:

• gap-4 đặt gap: 1rem trên cha — nhưng cha phải là flex hoặc grid thì gap mới có tác dụng.
• space-y-4 không dùng gap. Nó sinh một selector dạng > * + * rồi thêm margin-top: 1rem cho mọi con trừ con đầu:

/* space-y-4 thực chất là: */
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem;
}

Chốt: nếu cha đã là flex/grid → luôn ưu tiên gap (gọn, không đụng tới margin của con, hoạt động cả hai chiều khi wrap). Chỉ dùng space-y/space-x cho khối tĩnh (không flex/grid), ví dụ một stack đoạn văn. Cảnh báo: space-y “lỗi” khi con bị đảo thứ tự (flex-row-reverse) hoặc khi con có margin riêng.

2. Kích thước — width, height, min/max, size

Sizing trộn ba nguồn giá trị: thang spacing (số), phân số (1/2, 2/3…), và từ khóa (full, screen, min, max, fit).

Thang max-w-* có một bộ tên riêng (không phải thang spacing) để giữ nội dung dễ đọc:

<div class="w-64">16rem cố định</div>
<div class="w-full h-screen">đầy ngang, cao 100vh</div>
<div class="mx-auto max-w-prose">cột chữ ~65 ký tự — độ dài dòng lý tưởng để đọc</div>
<button class="size-10">nút vuông 2.5rem × 2.5rem</button>

Mẹo min-w-0: một flex item mặc định có min-width: auto, nghĩa là nó không co nhỏ hơn nội dung — đây là lý do text dài làm vỡ layout/không xuống dòng. Thêm min-w-0 (kèm truncate) để item chịu co lại đúng cách.

3. Typography — kích thước, độ đậm, giãn chữ, giãn dòng

text-* cho kích thước. Điểm hay của Tailwind v4: mỗi cỡ chữ kèm sẵn một line-height mặc định hợp lý, nên text-lg vừa đặt font-size vừa đặt line-height cho bạn.

Độ đậm font-* ánh xạ thẳng sang font-weight:

Các trục chữ còn lại bạn sẽ chạm hằng ngày:

<h1 class="text-3xl font-bold tracking-tight">Tiêu đề lớn</h1>
<p class="text-base leading-relaxed text-slate-600">
  Đoạn văn dễ đọc với line-height thoáng.
</p>
<p class="truncate">Dòng rất dài này sẽ bị cắt và thêm dấu ba chấm…</p>
<p class="line-clamp-2">Đoạn này tự cắt còn đúng 2 dòng dù nội dung dài bao nhiêu.</p>

4. Màu sắc — palette + bộ chỉnh độ mờ

Mỗi màu trong Tailwind có 11 sắc độ, từ 50 (nhạt nhất) tới 950 (đậm nhất). 500 là “chuẩn”. Cấu trúc tên utility luôn là thuộc-tính-tên-sắc-độ:

Một số họ màu có sẵn (mỗi họ đều có đủ 50→950): slate gray zinc neutral stone (xám), red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose, cùng black white transparent current.

Quy ước chọn sắc độ để UI hài hòa mà không phải nghĩ nhiều:

Bộ chỉnh độ mờ /NN — cơ chế

Thêm / và một số 0–100 vào bất kỳ utility màu để đặt độ mờ chỉ cho màu đó, không ảnh hưởng con bên trong (khác hẳn opacity-* làm mờ cả phần tử):

<p class="text-indigo-500/70">indigo ở 70% độ đục</p>
<div class="bg-black/50">lớp phủ đen 50% — overlay kinh điển</div>
<div class="border-white/10">viền trắng rất mờ trên nền tối</div>

Bên dưới, Tailwind v4 sinh ra giá trị màu dùng color-mix hoặc kênh alpha, ví dụ text-indigo-500/70 → color: color-mix(in oklab, var(--color-indigo-500) 70%, transparent). Vì mọi token màu ở v4 là biến CSS, bạn có thể tự thấy chúng trong DevTools.

/opacity vs opacity-50: bg-black/50 chỉ làm trong suốt nền; chữ và icon bên trong vẫn đục. opacity-50 làm mờ cả phần tử lẫn mọi thứ bên trong. Dùng /NN cho overlay; dùng opacity-* khi muốn làm mờ nguyên cụm (ví dụ trạng thái disabled:opacity-50).

Cần một màu ngoài palette? Dùng arbitrary value: bg-[#1da1f2], text-[oklch(0.7_0.15_250)] — nhưng tiết chế, vì nó nằm ngoài thang chung.

5. Flexbox — kiểu Tailwind

Mỗi khái niệm Flexbox ánh xạ thành đúng một utility. Đây là bảng tra đầy đủ:

Hai trục cần nhớ: justify-* luôn theo trục chính (mặc định ngang), items-* theo trục phụ (vuông góc trục chính). Khi đổi sang flex-col, trục chính thành dọc → justify-* giờ căn theo chiều dọc, items-* theo chiều ngang. Đây là nhầm lẫn kinh điển.

flex-row (mặc định):              flex-col:
  justify → ngang →                 justify → dọc ↓
  items   → dọc ↓                    items   → ngang →

Recipe phổ biến nhất trong mọi UI — một thanh ngang, logo trái, nav phải:

<header class="flex items-center justify-between gap-4 px-6 py-4">
  <span class="font-semibold">Logo</span>
  <nav class="flex items-center gap-4">
    <a href="#">Home</a><a href="#">Docs</a><a href="#">About</a>
  </nav>
</header>

flex-1 + min-w-0: khi một item flex-1 chứa text dài cần truncate, nhớ thêm min-w-0, nếu không item từ chối co và text tràn ra ngoài (xem mục 2).

6. Grid — cho layout hai chiều

Flex giỏi một chiều; Grid giỏi hàng × cột cùng lúc. Bảng tra:

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">chiếm 2/3</div>
  <div>1/3</div>
  <div class="col-span-full">trải hết hàng dưới</div>
</div>

Lưới “tự lấp đầy” bằng auto-fit + minmax

Một lưới responsive không cần breakpoint — cột tự co theo chỗ trống, mỗi cột tối thiểu 16rem. CSS gốc là repeat(auto-fit, minmax(16rem, 1fr)). Tailwind không có utility sẵn cho cú pháp này, nên dùng arbitrary value (nhớ thay khoảng trắng bằng _):

<div class="grid grid-cols-[repeat(auto-fit,minmax(16rem,1fr))] gap-4">
  <!-- thêm bao nhiêu card cũng tự xuống hàng, không cần md:/lg: -->
</div>

auto-fit vs auto-fill: auto-fit gộp các cột trống lại để các card hiện có giãn đầy; auto-fill giữ các cột rỗng (card không giãn). Muốn card luôn lấp đầy chiều ngang → auto-fit.

Dựng cả hai layout ngay bên dưới — bật utility, rồi đổi viewport để xem override md: kích hoạt:

7. Responsive — mobile-first

Đây là khái niệm làm người mới vấp nhiều nhất, nên hãy thấm cho kỹ:

Utility không tiền tố áp ở MỌI cỡ màn. Tiền tố như md: nghĩa là “từ breakpoint này trở LÊN” — nó không bao giờ trừ bớt ở dưới.

Bảng breakpoint mặc định (đều là min-width):

Mỗi tiền tố sinh một khối @media (min-width: …). Ví dụ md:grid-cols-2 sinh ra:

@media (min-width: 48rem) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

<!-- 1 cột trên mobile, 2 từ md, 3 từ lg -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">…</div>

Bạn thiết kế màn nhỏ nhất trước (class không tiền tố), rồi thêm override chỉ kích hoạt khi to lên. Đọc từ trái sang phải như kể chuyện: “xếp chồng trên mobile, hai cột từ tablet, ba cột từ laptop”.

Gotcha kinh điển: viết md:flex rồi mong nó cũng có hiệu lực trên mobile. Không — md: chỉ bắt đầu từ 768px, dưới đó phần tử về mặc định (display: block). Muốn “flex ở mọi nơi, cột trên mobile, hàng từ desktop” thì viết flex flex-col md:flex-row: flex áp toàn bộ, flex-col là mặc định nhỏ, md:flex-row đè khi rộng.

Nhắm một khoảng hẹp: thêm tiền tố max-* để chặn trên. md:max-lg:hidden nghĩa là ẩn trong khoảng 768px ≤ w < 1024px.

Container queries — phản ứng theo cha, không phải viewport

Đôi khi một card cần đổi layout theo bề rộng vùng chứa nó, chứ không phải bề rộng màn hình (cùng một card có thể nằm trong sidebar hẹp hoặc khu nội dung rộng). Đó là việc của container queries, hỗ trợ sẵn ở Tailwind v4:

1. Đánh dấu phần tử cha là container với @container.
2. Trên con, dùng tiền tố @sm:, @md:, @lg:… để phản ứng theo bề rộng cha.

<div class="@container">
  <!-- 1 cột khi cha hẹp, 2 cột khi cha ≥ 28rem — bất kể viewport -->
  <article class="grid grid-cols-1 @md:grid-cols-2 gap-4">…</article>
</div>

Khi nào dùng cái gì: md: cho layout trang (theo viewport); @md: cho component tái sử dụng phải tự thích ứng dù được đặt ở đâu. Container query là vũ khí thật sự để viết component “đặt đâu cũng đẹp”.

8. Recipe thực tế

Ba layout này lặp lại trong gần như mọi app — học thuộc khung là xong.

Holy-grail (header / sidebar / main / footer): dùng grid với hàng và cột đặt tên kích thước, main chiếm phần còn lại.

<div class="grid min-h-screen grid-rows-[auto_1fr_auto]">
  <header class="px-6 py-4 border-b">Header</header>
  <div class="grid md:grid-cols-[16rem_1fr]">
    <aside class="hidden md:block border-r p-4">Sidebar</aside>
    <main class="p-6">Nội dung chính</main>
  </div>
  <footer class="px-6 py-4 border-t">Footer</footer>
</div>

• grid-rows-[auto_1fr_auto]: header/footer cao theo nội dung, vùng giữa 1fr giãn đầy → footer luôn dính đáy dù nội dung ngắn.
• md:grid-cols-[16rem_1fr]: sidebar 16rem cố định, main chiếm phần còn lại — và hidden md:block ẩn sidebar trên mobile.

Lưới card responsive (tự lấp đầy, không breakpoint):

<div class="grid grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] gap-6">
  <article class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
    <h3 class="text-lg font-semibold text-slate-900">Card</h3>
    <p class="mt-2 text-sm text-slate-600">Mô tả ngắn.</p>
  </article>
  <!-- nhân bản article — lưới tự co cột theo chỗ trống -->
</div>

Header dính đỉnh (sticky) có nền mờ:

<header class="sticky top-0 z-10 flex items-center justify-between
               border-b border-slate-200 bg-white/80 px-6 py-3 backdrop-blur">
  <span class="font-semibold">Brand</span>
  <nav class="flex items-center gap-4 text-sm">
    <a href="#">Docs</a><a href="#">Pricing</a>
  </nav>
</header>

• sticky top-0: dính đỉnh khi cuộn (cần cha không có overflow: hidden).
• z-10: nổi trên nội dung cuộn bên dưới.
• bg-white/80 backdrop-blur: nền trắng mờ 80% + làm mờ phần phía sau → hiệu ứng kính.

Checklist layout production

Khi một layout trông ổn trong mockup nhưng vỡ ở dữ liệu thật, lỗi thường không nằm ở “Tailwind khó”, mà nằm ở giả định quá đẹp: tên ngắn, số lượng card vừa đủ, viewport lý tưởng. Trước khi coi một layout là xong, hãy kiểm qua các ca này:

Một pattern rất đáng thuộc: hàng có avatar cố định, phần nội dung co giãn, action bên phải không bị đẩy vỡ.

<div class="flex items-center gap-3">
  <img class="size-10 shrink-0 rounded-full" src="/avatar.png" alt="" />
  <div class="min-w-0 flex-1">
    <p class="truncate text-sm font-medium text-slate-900">
      Tên người dùng rất rất dài có thể đến từ dữ liệu thật
    </p>
    <p class="truncate text-sm text-slate-500">email-rat-dai@example.com</p>
  </div>
  <button class="shrink-0 rounded-md border px-3 py-1.5 text-sm">Mời</button>
</div>

Điểm đáng chú ý:

• shrink-0 giữ avatar và button không bị bóp méo.
• min-w-0 flex-1 cho vùng text được phép co.
• truncate chỉ hoạt động đúng khi phần tử có bề rộng bị giới hạn, nên nó thường đi cùng min-w-0.

9. Gotchas thường gặp

10. Bài tập

1. Dựng navbar: full width, item căn giữa dọc, logo bên trái và nhóm link bên phải, gap 1rem.

<header class="flex items-center justify-between gap-4 px-6 py-4">
  <span class="font-semibold">Logo</span>
  <nav class="flex items-center gap-4"><a>Home</a><a>Docs</a><a>About</a></nav>
</header>

2. Lưới card responsive: 1 cột mobile, 2 từ sm, 3 từ lg, gap 1.5rem.

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">…</div>

3. Căn giữa một box cả ngang và dọc trong một section cao full màn hình.

<section class="flex items-center justify-center min-h-screen">
  <div class="max-w-sm">Centered</div>
</section>

4. Không tra cứu: gap-10 sinh ra khoảng cách bao nhiêu pixel, và p-3.5 là bao nhiêu?

5. Một flex item chứa tiêu đề rất dài cần cắt bằng truncate, nhưng text vẫn tràn ra ngoài. Thiếu class nào?

6. Viết một lưới card tự co (mỗi card tối thiểu 12rem, lấp đầy hàng) không dùng bất kỳ breakpoint sm:/md:/lg: nào.

<div class="grid grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] gap-4">…</div>

Nâng cao: trong builder ở mục 6, tạo layout cột xếp chồng khi hẹp và hàng khi rộng bằng override md:, rồi đọc khối @media sinh ra để xác nhận breakpoint là 48rem.

Điểm chính

• Một thang spacing (n × 0.25rem, nhân-4 ra px) chi phối padding, margin, gap và sizing dạng số — đó là lý do UI Tailwind có nhịp nhất quán.
• gap cần cha là flex/grid và là lựa chọn ưu tiên; space-y/space-x dùng selector > * + * cho khối thường, nhưng dễ lỗi khi đảo thứ tự.
• Sizing trộn số, phân số và từ khóa (full, screen, min/max/fit); nhớ min-w-0 để flex item chịu co, và max-w-prose cho độ dài dòng dễ đọc.
• Typography: mỗi text-* kèm sẵn line-height hợp lý; truncate/line-clamp-n để cắt gọn nội dung dài.
• Màu theo cấu trúc thuộc-tính-tên-sắc-độ (50→950); bộ chỉnh /NN làm mờ chỉ màu đó, khác opacity-* làm mờ cả phần tử.
• Flexbox cho một chiều (justify-* theo trục chính, items-* theo trục phụ); Grid cho hai chiều, và grid-cols-[repeat(auto-fit,minmax(…))] cho lưới responsive không cần breakpoint.
• Responsive là mobile-first: không tiền tố = mọi cỡ, md:/lg: = breakpoint đó trở lên. Container queries (@container + @md:) cho component phản ứng theo cha — đặt đâu cũng đẹp.

Tiếp theo

Phần 3 — Design token & theming ở v4: directive @theme, tự định nghĩa màu/font/spacing dưới dạng biến CSS, cách làm dark mode kiểu v4, và cách mỗi token tự trở thành một utility.