Chuyển Figma sang Tailwind CSS: Hướng dẫn thực tế

Tailwind CSS là một trong những định dạng đầu ra mà developer hay yêu cầu nhất khi nhận bàn giao từ Figma, nhưng cũng là một trong những thứ tốn công nhất để làm thủ công. Mỗi giá trị spacing, màu sắc và cỡ chữ trong thiết kế đều phải được "dịch" trong đầu thành class Tailwind "đúng" — và chính bước dịch này âm thầm ngốn phần lớn thời gian bàn giao.

Vì sao chuyển Figma sang Tailwind thủ công lại chậm

Giá trị cốt lõi của Tailwind nằm ở một thang đo giới hạn, nhất quán — spacing, màu sắc và typography đều bám theo một tập token định sẵn thay vì giá trị tùy ý. Điều đó tuyệt vời khi code đã tồn tại. Nhưng để đi từ file Figma đến đó, ai đó phải tự tay làm cái việc "ép về thang đo" này:

• Đoán bước spacing. Designer đặt padding là 18px. Đó là p-4 (16px), p-5 (20px), hay phải dùng giá trị tùy ý như p-[18px]? Nhân quyết định này lên với mọi gap, margin và padding trong file.
• Khớp màu với theme. Bộ chọn màu của Figma không quan tâm đến bảng màu trong tailwind.config của bạn. Một mã hex phải được đối chiếu với các sắc xám, xanh và màu thương hiệu trong theme, nếu không bạn sẽ có hàng loạt class kiểu bg-[#f4f4f5] rải rác trong code thay vì bg-gray-100.
• Dựng lại thang typography. Cỡ chữ, line-height và độ đậm cần ánh xạ nhất quán vào các utility text-* và font-*, nếu không những heading trông giống hệt nhau trong Figma sẽ dùng ba tổ hợp class khác nhau trong code.
• Lặp lại toàn bộ cho từng breakpoint. Không bước nào ở trên chỉ tốn công một lần — nó lặp lại cho mỗi biến thể responsive, thủ công, với các tiền tố sm:, md:, lg: chồng lên trên.

Không bước nào trong số này khó, nhưng đây chính là kiểu công việc lặp đi lặp lại, ít đòi hỏi phán đoán — nơi sự thiếu nhất quán len lỏi vào. Mà class Tailwind thiếu nhất quán thì đi ngược lại chính lý do người ta dùng Tailwind.

MarkupGen sinh Tailwind từ thiết kế thật như thế nào

MarkupGen được xây để loại bỏ bước dịch đó, chứ không chỉ giúp làm nhanh hơn bằng tay. Quy trình giống nhau dù bạn xuất ra CSS thuần hay Tailwind:

1. Xuất frame từ Figma bằng plugin MarkupGen. Plugin nắm bắt cấu trúc, style và hình ảnh của frame rồi đưa vào workspace của bạn.
2. AI dựng markup dựa trên cấu trúc và style thực tế của thiết kế, không phải một bản xấp xỉ thô.
3. Tinh chỉnh nội dung, font và bố cục trực quan trong trình soạn thảo tích hợp trước khi hoàn tất.
4. Xuất gói code cuối cùng theo định dạng bạn chọn.

Phần quan trọng nhất với bài viết này là bước 4: khi chọn Tailwind CSS làm định dạng xuất, các class utility được sinh ra từ chính token spacing, màu sắc và typography thật của thiết kế — chứ không phải đoán từ ảnh chụp màn hình. Một giá trị padding trong frame Figma được ánh xạ tới utility spacing Tailwind gần nhất, màu fill được đối chiếu với giá trị màu thật của thiết kế, còn cỡ chữ và độ đậm được chuyển thành các class text-* và font-* tương ứng. Đó chính là công việc "dịch" mà developer vẫn làm bằng tay, chỉ khác là làm trực tiếp từ dữ liệu thiết kế thay vì bằng mắt.

HTML/CSS thuần và React là hai định dạng đầu ra còn lại — Tailwind chỉ là một trong ba lựa chọn, có thể chọn riêng cho từng lần xuất tùy vào codebase đích.

Auto Layout trở thành các class Flexbox

Hầu hết file Figma thực tế đều dùng Auto Layout cho bất cứ thứ gì giống một component, nên cách nó được chuyển đổi quan trọng không kém màu sắc hay spacing. MarkupGen ánh xạ hướng, gap, padding và alignment của Auto Layout sang cấu trúc CSS Flexbox tương đương, và với đầu ra Tailwind, điều đó thể hiện qua các class flex tương ứng — hướng trở thành utility flex-row / flex-col phù hợp, gap trở thành utility gap-*, padding trở thành p-* / px-* / py-*, còn thiết lập alignment trở thành các utility items-* / justify-*. Breakpoint responsive và hành vi co giãn linh hoạt cũng được sinh tự động dựa trên các ràng buộc resize đã đặt sẵn trên frame, thay vì phải làm thêm một bước thủ công riêng. Muốn hiểu sâu hơn cách từng thuộc tính Auto Layout ánh xạ sang Flexbox, xem thêm Auto Layout to CSS.

Rà soát class Tailwind trước khi triển khai

Chuyển đổi tự động cho ra đúng class utility với phần lớn thiết kế, nhưng vẫn đáng để rà soát lại trước khi merge:

• Tìm các giá trị lệch chuẩn. Nếu thiết kế dùng một giá trị spacing hơi lệch so với thang Tailwind, cân nhắc chỉnh thiết kế về một bước chuẩn hay giữ nguyên giá trị chính xác.
• Kiểm tra độ nhất quán màu sắc trên toàn trang, nhất là ở những component xuất hiện nhiều lần — cùng một màu nhìn thấy phải luôn ra cùng một class ở mọi nơi.
• Xác nhận thứ bậc heading và các thẻ ngữ nghĩa đúng chuẩn, vì đầu ra mặc định là HTML sạch, có ngữ nghĩa, không có <div> lồng thừa.
• Dùng trình soạn thảo tích hợp để chỉnh nội dung, font hay bố cục trực quan thay vì sửa tay các class đã xuất, rồi xuất lại khi đã ưng ý.

Mỗi lần xuất còn nhận được điểm chất lượng AI tự động, giúp bạn có ngay tín hiệu nhanh để biết một bản xuất đã sẵn sàng triển khai hay cần xem lại trước khi đi xa hơn.

Thử ngay trên thiết kế của bạn

Nếu bạn vẫn đang tự tay chuyển giá trị Figma thành class Tailwind, hãy thử xem bao nhiêu công sức đó biến mất khi class được sinh từ token thật của thiết kế thay vì đoán mò. Dùng thử MarkupGen miễn phí trên một frame Figma của chính bạn, hoặc đọc hướng dẫn Figma sang HTML tổng quát để nắm toàn bộ quy trình bốn bước. Có thắc mắc gì cứ liên hệ support@markupgen.com.