Chuyển đổi CSS sang Tailwind

Dán CSS thuần, nhận ngay class Tailwind CSS tương ứng — xử lý hoàn toàn trên trình duyệt.

CSS đầu vào

flex items-center justify-between py-4 px-6 mb-3 bg-[#ffffff] rounded-lg border border-[#e5e7eb] text-sm font-semibold text-[#111827]
13 class
11 thuộc tính→ 13 class
FAQ
Nhóm Thiết kế (Design)•Tài liệu kỹ thuật & Đặc tả RFC

Tài liệu & Hướng dẫn chuyên sâu: Chuyển đổi CSS sang Tailwind (CSS to Tailwind Converter)

1. Tổng quan & Nguyên lý hoạt động

Khi chuyển một thiết kế hoặc một đoạn CSS thuần có sẵn (từ Figma dev mode, từ một dự án cũ, hay từ một snippet trên mạng) sang một dự án dùng Tailwind CSS, lập trình viên thường phải tự tay tra cứu từng thuộc tính một trong bảng cheatsheet của Tailwind — việc lặp đi lặp lại và dễ nhầm giữa các thang đo spacing, font-size hay border-radius. Công cụ Chuyển đổi CSS sang Tailwind của Verdbench tự động hoá bước này: dán vào một khối khai báo CSS (hoặc cả một rule có selector), công cụ sẽ phân tích từng cặp thuộc tính/giá trị và map sang class Tailwind tương ứng theo đúng thang đo mặc định (spacing, typography, border-radius...), đồng thời dùng cú pháp arbitrary value/property (`[property:value]`) làm phương án dự phòng cho bất kỳ thuộc tính hoặc giá trị nào không khớp thang đo chuẩn — đảm bảo không có khai báo CSS nào bị bỏ sót trong kết quả.

2. Ưu thế kiến trúc & Tính năng nổi bật

Map đúng thang đo mặc định của Tailwind

Các giá trị px/rem phổ biến cho spacing (margin, padding, gap), font-size và border-radius được quy đổi chính xác về token số của Tailwind (vd. 16px → 4, 8px → 2) thay vì đoán mò, dựa trên bảng thang đo gốc 1 unit = 0.25rem.

Không bỏ sót thuộc tính nhờ arbitrary value

Bất kỳ thuộc tính hoặc giá trị nào chưa có mapping chuẩn (màu HEX tuỳ ý, box-shadow phức tạp, thuộc tính hiếm gặp) đều được chuyển sang cú pháp arbitrary value/property hợp lệ của Tailwind (`text-[#1a1a1a]`, `[mask-type:alpha]`) kèm cảnh báo rõ ràng, thay vì âm thầm bỏ qua.

3 định dạng xuất: chuỗi class, HTML, JSX

Kết quả có thể xem dưới dạng chuỗi class thuần để gắn vào bất kỳ framework nào, hoặc bọc sẵn trong thẻ `<div class="...">` (HTML) / `<div className="...">` (JSX) để dán thẳng vào component.

3. Các nhóm thuộc tính CSS được hỗ trợ

Công cụ hỗ trợ ánh xạ trực tiếp cho các nhóm thuộc tính phổ biến nhất khi dựng giao diện; các thuộc tính ngoài danh sách vẫn được xuất ra qua cú pháp arbitrary property:

NhómThuộc tính CSS tiêu biểuVí dụ chuyển đổi
Layoutdisplay, flex-direction, align-items, justify-content, gap, position, overflow, z-indexdisplay: flex; align-items: center; → flex items-center
Spacingmargin, padding (shorthand & từng cạnh), width, heightpadding: 16px 24px; → py-4 px-6
Typographyfont-size, font-weight, color, text-align, line-height, text-transformfont-size: 14px; font-weight: 600; → text-sm font-semibold
Border & Backgroundborder (shorthand), border-radius, border-color, background-colorborder-radius: 8px; → rounded-lg
Khácopacity, box-shadow, grid-template-columns, cursorgrid-template-columns: repeat(3, 1fr); → grid-cols-3

4. Câu hỏi thường gặp (FAQ)

Giải đáp các thắc mắc phổ biến của lập trình viên khi sử dụng tiện ích Chuyển đổi CSS sang Tailwind (CSS to Tailwind Converter).

Vì một mã màu HEX bất kỳ (ví dụ #3b82f6) không chắc trùng khớp hoàn toàn với một sắc độ cụ thể trong bảng màu mặc định của Tailwind, công cụ không đoán ra sắc độ gần đúng (việc này dễ gây sai lệch màu thực tế so với thiết kế gốc). Thay vào đó, công cụ dùng cú pháp arbitrary value chính xác tuyệt đối: `text-[#3b82f6]` hoặc `bg-[#3b82f6]`, giữ nguyên 100% giá trị màu gốc.

5. Công cụ liên quan