Cách dùng Chuyển CSS sang Tailwind
- Dán các quy tắc CSS (kèm selector) hoặc chỉ các khai báo.
- Xem danh sách class được tạo ra cho từng selector.
- Sao chép class vào HTML hoặc JSX. Kiểm tra các giá trị tùy chỉnh và thay bằng theme token khi phù hợp.
Cách ánh xạ giá trị
Thang spacing mặc định của Tailwind dùng bước 0.25 rem (4 px), nên padding: 16px thành p-4 và margin: 0 auto thành my-0 mx-auto. Giá trị không nằm trên thang sẽ dùng cú pháp arbitrary value: padding: 13px → p-[13px]. Kiểu chữ, bo góc và độ đậm được chuyển sang các bước đã có tên sẵn:
| CSS | Tailwind |
|---|---|
display: flex; flex-direction: column | flex flex-col |
gap: 16px | gap-4 |
font-size: 24px; font-weight: 700 | text-2xl font-bold |
border-radius: 12px | rounded-xl |
background-color: #7c5cff | bg-[#7c5cff] |
width: 100% | w-full |
.btn:hover { color: #fff } | hover:text-white |
Một số giới hạn cần biết
- Màu sắc sẽ thành arbitrary value. Sau đó, bạn nên map chúng vào bảng màu của theme (ví dụ
bg-violet-500). Công cụ CSS variables sang Tailwind giúp bạn định nghĩa theme. - Thuộc tính không có utility tương ứng sẽ được viết dưới dạng arbitrary property:
[mask-image:url(...)]. - Media query, selector phức tạp và animation cần chuyển thủ công sang
md:,group-hover:và cấu hình theme. !importantsẽ được chuyển thành tiền tố!.
Với các giá trị dùng một lần, bạn có thể dùng công cụ tạo arbitrary value Tailwind để tạo từng class riêng lẻ, còn công cụ tạo màu Tailwind sẽ giúp bạn tạo bộ màu đầy đủ.
Cũng được tìm dưới tên: css sang tailwind, tailwind converter, chuyển đổi css sang tailwind class, tailwind css generator, convert css to tailwind online, chuyển css thành tailwind.
Các công cụ dùng kèm tốt với Chuyển CSS sang Tailwind
- Chuyển đổi PX sang REM — Chuyển đổi qua lại giữa pixel, rem và em với kích thước font gốc của riêng bạn, hoặc dán cả một stylesheet và chuyển đổi mọi giá trị px chỉ trong một lần.
- Định dạng CSS — Chuyển stylesheet đã nén thành CSS dễ đọc, mỗi thuộc tính một dòng và các khối @media được lồng đúng cấu trúc.
- Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.
- Trình tạo CSS Keyframes — Trình chỉnh sửa trực quan cho @keyframes.
Câu hỏi thường gặp
Công cụ có hỗ trợ Tailwind v4 không?
Có. Các utility và arbitrary value được tạo ra hoạt động tốt trên cả Tailwind v3 và v4.
Vì sao màu được viết dạng bg-[#hex]?
Màu chính xác được giữ dưới dạng arbitrary value để giao diện không bị thay đổi. Khi đã có bảng màu, bạn có thể thay bằng màu trong theme của mình.
Công cụ có chuyển được media query không?
Không tự động. Bạn hãy chuyển riêng các quy tắc bên trong media query và thêm tiền tố responsive phù hợp, chẳng hạn
md:.Tôi có thể cài Chuyển CSS sang Tailwind như một ứng dụng web và dùng khi không có mạng không?
Có. Chuyển CSS sang Tailwind là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.