Bài 40 — Tailwind CSS — Utility-first Workflow

Mở đầu — vì sao bài này quan trọng

Hãy hình dung bạn đang làm landing page cho một cửa hàng cà phê ở Đà Nẵng. Theo cách làm truyền thống, bạn sẽ viết HTML, rồi chuyển sang một file styles.css riêng, nghĩ ra một cái tên class như .btn-order, rồi quay lại HTML gắn class đó, rồi lại quay về CSS để viết background, padding, border-radius... Mỗi lần muốn chỉnh một chút, bạn lại nhảy qua nhảy lại giữa hai file. Chưa kể sau ba tháng, file CSS của bạn phình lên 2000 dòng, và bạn không dám xoá dòng nào vì sợ "đụng" vào chỗ khác.

Tailwind CSS sinh ra để giải quyết đúng nỗi đau đó. Thay vì viết CSS riêng và đặt tên class, bạn ghép sẵn các utility class — những class nhỏ, mỗi class làm đúng một việc — ngay trên thẻ HTML. Cái nút đặt hàng kia, với Tailwind, chỉ là:

<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  Mua ngay
</button>

Đọc class là hiểu ngay nút này màu xanh, hover thì đậm hơn, chữ trắng, có padding ngang dọc, bo góc. Bạn không cần mở file nào khác, không cần đặt tên class, không sợ đụng chạm.

Trong toàn bộ khoá học này, các bài trước đã dạy bạn nền tảng: Box Model (Bài 20), Flexbox (Bài 21), Grid (Bài 22), CSS Variables (Bài 23), Selectors & Specificity (Bài 24). Bài 40 là nơi bạn học cách gói toàn bộ kiến thức CSS đó vào một workflow nhanh hơn nhiều lần — đây là công cụ mà gần như mọi công ty tech ở Việt Nam (từ startup đến MoMo, Tiki, VNG) đều đang dùng. Hiểu Tailwind không phải để "khỏi học CSS" — mà để viết CSS bạn đã biết với tốc độ gấp ba.

Khái niệm cốt lõi

Utility-first nghĩa là gì

"Utility-first" (ưu tiên các class tiện ích) là một triết lý viết CSS. Thay vì tư duy theo component ("tôi cần một class .card chứa mọi style của card"), bạn tư duy theo thuộc tính nhỏ lẻ ("tôi cần padding 16px, nền trắng, bo góc, đổ bóng nhẹ").

Mỗi utility class trong Tailwind tương ứng gần như 1-1 với một dòng CSS:

Class Tailwind	CSS tương đương
`p-4`	`padding: 1rem;`
`mt-2`	`margin-top: 0.5rem;`
`flex`	`display: flex;`
`text-center`	`text-align: center;`
`bg-red-500`	`background-color: #ef4444;`
`rounded-lg`	`border-radius: 0.5rem;`

Điểm mấu chốt: những class này không bao giờ thay đổi. p-4 luôn là padding: 1rem, ở bất kỳ project nào, do bất kỳ ai viết. Đó là sự khác biệt lớn so với việc tự đặt tên class — vì .card ở project này khác hoàn toàn .card ở project kia.

Hệ thống spacing và scale

Tailwind không cho bạn nhập số tuỳ ý kiểu padding: 13px. Nó dùng một scale (thang đo) chuẩn hoá, nhân với 0.25rem (4px):

p-1 = 4px, p-2 = 8px, p-3 = 12px, p-4 = 16px, p-6 = 24px, p-8 = 32px...

Đây chính là ứng dụng của Design Tokens mà Bài 39 đã nói: spacing được token hoá. Vì ai cũng dùng cùng thang đo, giao diện tự động nhất quán — không còn cảnh chỗ này padding 14px, chỗ kia 15px.

Responsive và state ngay trên class

Đây là phần mạnh nhất. Bạn thêm prefix trước class để áp dụng có điều kiện:

md:flex — chỉ display: flex khi màn hình từ breakpoint md (768px) trở lên.
hover:bg-blue-600 — đổi nền khi rê chuột.
focus:ring-2 — viền focus khi click vào (liên quan Bài 43 — Focus States).
dark:bg-gray-900 — nền tối khi bật Dark Mode (Bài 41).

Tailwind theo triết lý mobile-first (Bài 16): class không prefix áp dụng cho mọi màn hình, prefix md:, lg: chỉ ghi đè khi màn hình lớn hơn.

<div class="flex flex-col md:flex-row gap-4">
  <!-- Điện thoại: xếp dọc. Tablet trở lên: xếp ngang -->
</div>

Tailwind chạy như thế nào (về kỹ thuật)

Nhiều bạn tưởng Tailwind là một file CSS khổng lồ chứa sẵn hàng nghìn class. Thực ra ngược lại: Tailwind có một bộ engine quét code của bạn, tìm xem bạn dùng những class nào, rồi chỉ sinh ra đúng những class đó vào file CSS cuối cùng. Đây gọi là "purge" hoặc JIT (Just-In-Time). Kết quả: file CSS sản phẩm thường chỉ 8-15KB, nhỏ hơn nhiều so với việc tự viết CSS bừa bãi.

Tình huống thực tế

Ví dụ 1 — Startup giao đồ ăn ở TP.HCM rút ngắn thời gian build UI

Một startup giao đồ ăn nhỏ (gọi là FoodGo) có 3 lập trình viên frontend. Trước đây họ dùng CSS thuần với cách đặt tên BEM (.card__title--featured). Sau 8 tháng, file CSS của họ lên tới 4.200 dòng. Vấn đề lớn nhất không phải tốc độ tải — mà là nỗi sợ xoá code. Mỗi khi một dev muốn dọn CSS thừa, cả nhóm phải kiểm tra thủ công xem class đó còn dùng ở đâu không, vì xoá nhầm là vỡ giao diện ở trang khác.

Họ chuyển sang Tailwind cho sản phẩm mới. Kết quả sau 2 tháng:

Thời gian dựng một màn hình mới giảm khoảng 40%, vì dev không còn nhảy qua lại giữa HTML và CSS, cũng không tốn thời gian "nghĩ tên class".
File CSS sản phẩm cuối còn 11KB (so với 180KB trước đó), vì Tailwind tự loại bỏ class không dùng.
Nỗi sợ xoá code biến mất: khi xoá một component HTML, toàn bộ style của nó "đi theo" luôn, vì style nằm ngay trên thẻ.

Bài học: Lợi ích lớn nhất của Tailwind với một nhóm nhỏ không phải là "đẹp hơn" mà là không còn CSS chết (dead CSS) và giảm ma sát khi sửa đổi.

Ví dụ 2 — Agency làm web cho khách hàng và bài toán nhất quán

Một agency thiết kế web ở Hà Nội nhận làm 5-6 website mỗi tháng cho các khách hàng khác nhau. Vấn đề kinh điển: mỗi designer-dev có "gu" spacing riêng. Người thì padding 20px, người 24px, người 18px. Khi gộp lại thành một sản phẩm, giao diện trông "lệch pha", thiếu chuyên nghiệp, và khách hàng feedback là "nhìn không đều".

Sau khi áp dụng Tailwind, cả team bị "ép" dùng chung scale spacing (4, 8, 12, 16, 24, 32...). Họ còn cấu hình thêm trong file tailwind.config.js để định nghĩa màu thương hiệu của từng khách:

// tailwind.config.js
theme: {
  extend: {
    colors: {
      brand: '#1a73e8',   // màu chủ đạo của khách hàng
    }
  }
}

Giờ cả team chỉ cần viết bg-brand, text-brand. Nếu khách đổi màu thương hiệu, sửa một dòng trong config, toàn bộ site đổi theo.

Bài học: Tailwind là cách thực thi Design System (Bài 38, 39) một cách bắt buộc. Nó biến design tokens từ "lý thuyết trên giấy" thành thứ dev không thể đi chệch.

Ví dụ 3 — Khi Tailwind là lựa chọn SAI

Một bạn freelancer nhận làm một trang HTML email marketing (gửi qua Mailchimp). Bạn ấy dùng Tailwind vì đã quen tay. Kết quả: hỏng bét. Vì HTML email không hỗ trợ file CSS bên ngoài và nhiều client email (như Outlook) bỏ qua class, toàn bộ utility class của Tailwind vô tác dụng — email gửi đi trông như một trang trắng không style.

Bài học: Tailwind tuyệt vời cho web app và website, nhưng không phải công cụ vạn năng. Với email HTML, bạn vẫn phải dùng inline-style truyền thống. Hiểu giới hạn của công cụ cũng quan trọng như biết dùng nó.

Hướng dẫn từng bước

Cách nhanh nhất để thử Tailwind mà không cần cài đặt phức tạp:

Bước 1 — Thử nhanh bằng Play CDN (chỉ để học/thử nghiệm). Tạo một file index.html, thêm dòng script vào thẻ <head>:

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

Sau đó viết HTML và gắn utility class thoải mái. Lưu ý: CDN này chỉ dùng để học và prototype, không dùng cho sản phẩm thật vì nặng và chậm.

Bước 2 — Dựng một card sản phẩm thực tế. Áp dụng kiến thức Card (Bài 25):

<div class="max-w-sm rounded-lg shadow-md bg-white p-6">
  <img src="caphe.jpg" class="w-full h-48 object-cover rounded-md" alt="Cà phê">
  <h3 class="mt-4 text-lg font-semibold text-gray-800">Cà phê sữa đá</h3>
  <p class="mt-1 text-sm text-gray-500">Đậm đà vị Việt</p>
  <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded">
    Đặt ngay — 35.000đ
  </button>
</div>

Hãy đọc từng class và đối chiếu với CSS bạn đã học. max-w-sm giới hạn chiều rộng, shadow-md đổ bóng, object-cover cho ảnh không bị méo.

Bước 3 — Làm cho nó responsive. Thêm prefix breakpoint để card to hơn trên desktop:

<div class="max-w-sm md:max-w-md p-4 md:p-6">

Bước 4 — Cài đặt thật cho dự án sản phẩm. Khi làm thật, bạn dùng npm:

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i input.css -o output.css --watch

Cờ --watch giúp Tailwind tự build lại mỗi khi bạn sửa HTML.

Bước 5 — Tách component khi class lặp quá nhiều. Khi một khối HTML lặp đi lặp lại (ví dụ nút "Mua ngay" xuất hiện 20 chỗ), đừng copy-paste 8 class mỗi lần. Hãy tạo một component thật trong framework bạn dùng (React, Vue) hoặc dùng @apply để gom class:

.btn-primary {
  @apply bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded;
}

Lỗi thường gặp & mẹo

Lỗi 1 — "HTML của tôi xấu quá, đầy class!" Đây là phàn nàn phổ biến nhất của người mới. Đúng là HTML trông rối hơn. Nhưng hãy nhớ: bạn đánh đổi "HTML gọn + CSS rối khổng lồ ở file khác" lấy "HTML hơi dài + không cần file CSS". Khi quen, bạn sẽ thấy đọc class ngay tại chỗ nhanh hiểu hơn nhiều so với phải mở file CSS đi tìm. Mẹo: dùng tính năng tự xuống dòng class trong editor, và tách component khi class quá 10-12 cái.

Lỗi 2 — Ghép class động sai cách. Trong React, đừng viết ` text-${color}-500 vì Tailwind quét code bằng text tĩnh, nó sẽ không "thấy" class này và không sinh ra CSS. Hãy viết đầy đủ class trong điều kiện: color === 'red' ? 'text-red-500' : 'text-blue-500'.

Lỗi 3 — Quên mobile-first. Nhiều bạn viết text-sm md:text-sm rồi thắc mắc sao desktop không to. Nhớ rằng class không prefix là cho mobile, prefix là ghi đè cho màn lớn. Muốn desktop to thì text-sm md:text-lg.

Lỗi 4 — Lạm dụng giá trị tuỳ chỉnh. Tailwind cho phép p-[13px] để nhập số bất kỳ, nhưng dùng nhiều là phá vỡ scale, mất luôn lợi ích nhất quán. Chỉ dùng khi thật sự cần.

Mẹo cài extension: Cài "Tailwind CSS IntelliSense" cho VS Code. Nó gợi ý class, hiện màu, và báo lỗi class sai chính tả — giúp bạn học nhanh gấp nhiều lần.

Mẹo về Prettier: Cài plugin prettier-plugin-tailwindcss để tự sắp xếp thứ tự class theo chuẩn, code cả team trông đồng đều.

`Bài tập thực hành`

Dựng lại không cần CSS riêng: Tạo một trang index.html dùng Play CDN. Dựng một card sản phẩm (ảnh, tên, giá, nút "Mua ngay") hoàn toàn bằng utility class, không viết một dòng <style> nào.

Thử nghiệm responsive: Làm một layout có 1 cột trên điện thoại, 2 cột trên tablet (md:), 3 cột trên desktop (lg:) bằng grid-cols-1 md:grid-cols-2 lg:grid-cols-3. Thu nhỏ trình duyệt để kiểm tra.


Đối chiếu CSS: Lấy 8 class bạn vừa dùng, viết ra file CSS tương đương cho từng class. Bài này giúp bạn chắc chắn Tailwind không phải "phép màu" — nó chỉ là CSS bạn đã biết, viết nhanh hơn.

Tìm điểm dừng: Viết một nút bấm lặp 5 lần trên trang. Sau đó refactor bằng @apply để gom thành một class .btn. Suy nghĩ: lúc nào nên dùng utility trực tiếp, lúc nào nên gom?


Tóm tắt

Utility-first nghĩa là ghép các class nhỏ (mỗi class một việc) ngay trên HTML, thay vì viết CSS riêng và đặt tên class.
Mỗi utility class tương ứng gần 1-1 với một dòng CSS và không bao giờ đổi nghĩa, nên giao diện tự động nhất quán.
Tailwind dùng scale chuẩn hoá cho spacing, màu, font — chính là Design Tokens được thực thi bắt buộc.

Prefix như md:, hover:, dark:` cho phép viết responsive và state ngay trên class, theo triết lý mobile-first.
Engine của Tailwind chỉ sinh ra class bạn thực sự dùng, nên file CSS cuối rất nhẹ.
Lợi ích lớn nhất với team: không còn CSS chết, giảm ma sát khi sửa, và ép cả nhóm dùng chung hệ thống thiết kế.
Tailwind không vạn năng: tránh dùng cho HTML email; tránh ghép class động bằng string; tránh lạm dụng giá trị tuỳ chỉnh.
Tailwind không thay thế kiến thức CSS — nó là cách viết CSS bạn đã học với tốc độ nhanh hơn nhiều lần.