CSS sang Tailwind

Chủ đề mặc định của Tailwind không thể bao quát mọi giá trị CSS có thể xảy ra; do đó, công cụ chuyển đổi ưu tiên những giá trị có sẵn tiện ích được đặt tên, và ở những trường hợp còn lại sẽ dùng các giá trị tùy ý.

Ánh xạ trực tiếp

Các phép ánh xạ dựa trên quy mô

Các giá trị padding, margin, width, height và kích thước tối thiểu/tối đa đều được chia cho 4 để tạo ra một bước giãn cách của Tailwind, ví dụ: padding: 16px trở thành p-4, width: 32px trở thành w-8. Những giá trị không rơi vào một bước tròn trịa sẽ chuyển sang giá trị tùy ý trên tiện ích tương ứng; chẳng hạn, width: 37px trở thành w-[37px].

border-radius được ánh xạ tới tiện ích được đặt tên gần nhất (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl). Các kích thước lớn hơn 16px sẽ chuyển thành rounded-full – phù hợp với các phần tử hình viên thuốc nhưng không phù hợp với những bán kính lớn bất thường; vui lòng kiểm tra kết quả trước khi triển khai.

font-size chuyển đổi thành text-xs và sau đó tiếp tục chuyển đổi thành text-3xl dựa trên các ngưỡng điểm ảnh.

Những lưu ý quan trọng

• Các lớp giả (pseudo-classes), truy vấn phương tiện (media queries) và bộ chọn (selectors) không được dịch; chỉ các khai báo nằm trong dấu ngoặc nhọn mới được dịch. Bạn vẫn cần tự thêm các biến thể như hover: hoặc md:.
• Màu sắc sẽ rơi vào các giá trị tùy ý như text-[#1f2937] do công cụ chuyển đổi không biết bảng màu chủ đề Tailwind của bạn. Hãy thay thủ công bằng text-gray-800 hoặc một token tùy chỉnh.
• Các thuộc tính viết tắt mà bạn hiếm khi sử dụng (border, background, transition) sẽ được xuất ra nguyên văn là [property:value] – vui lòng kiểm tra chúng trước khi triển khai.