Dán khối khai báo CSS và chuyển đổi mẫu được hiển thị thành các lớp Tailwind mà bạn có thể sao chép vào các thành phần.

CSS
Tailwind v4

Chưa có đầu ra

Đầu ra Tailwind được tạo sẽ tự động xuất hiện ở đây.

Bộ chuyển đổi Tailwind hoàn hảo đến từng pixel

Chuyển đổi CSS thành các lớp Tailwind sạch

Chuyển đổi khai báo đầu tiên
Dán khối khai báo CSS và Tailfind áp dụng nó cho phần tử mẫu trước khi chuyển đổi kết quả được hiển thị thành các lớp Tailwind có thể sử dụng lại.
Tùy chọn tiện ích mặc định
Các giá trị mặc định có thể dùng lại của Tailwind được giữ lại khi giá trị khai báo khớp với thang đo của framework.
Dự phòng giá trị tùy ý
Các giá trị không mặc định trở thành arbitrary utility rõ ràng, giúp dễ kiểm tra pixel, màu, shadow và timing tùy chỉnh.
Đầu ra an toàn cho bố cục
Khoảng cách, kích thước, hiển thị, lưới, flex, đường viền, bóng và kiểu chữ được ánh xạ từ mẫu được kết xuất.
Trích xuất lớp nhanh
Đầu ra là danh sách class Tailwind tập trung, sẵn sàng sao chép vào component, thử nghiệm token hoặc lượt dọn dẹp.
Phù hợp cho audit
Sử dụng nó để thay thế các khối CSS một lần, thử nghiệm kiểu nội tuyến và nguyên mẫu hệ thống thiết kế bằng các tiện ích Tailwind rõ ràng hơn.

Hướng dẫn chuyển đổi CSS

Biến các khai báo CSS thành class Tailwind

Bộ chuyển đổi CSS sang Tailwind biến khối khai báo thành các utility class Tailwind gần nhất và có thể mang sang dự án khác. Nó hữu ích cho design token dùng một lần, dọn inline style và đưa các đoạn CSS nhỏ vào markup của component.

Tailfind áp dụng các khai báo cho một phần tử mẫu trước khi chuyển đổi, do đó, các giá trị bố cục, khoảng cách, màu sắc, đường viền, bóng, kiểu chữ và kích thước được diễn giải thông qua cùng một đường dẫn kết xuất trình duyệt được tiện ích mở rộng sử dụng.

Dùng để chuyển đổi thuộc tính CSS thành class Tailwind, kiểm tra giá trị nào khớp với thang mặc định của Tailwind và giữ giá trị ngoài mặc định dưới dạng arbitrary value rõ ràng.

Nó có thể chuyển đổi CSS thành Tailwind không?
Đúng. Dán khối khai báo CSS và Tailfind áp dụng nó cho một phần tử mẫu trước khi xuất danh sách lớp Tailwind gần nhất.
Các giá trị tùy chỉnh có được giữ nguyên không?
Tailfind ánh xạ các giá trị tới các tiện ích Tailwind mặc định khi có thể và giữ các giá trị không mặc định hiển thị dưới dạng các tiện ích tùy ý thay vì ẩn chúng.
Tôi có nên dán một bản định kiểu đầy đủ không?
Bộ chuyển đổi CSS được thiết kế cho các khối khai báo. Sử dụng trình chuyển đổi HTML/CSS khi cần bộ chọn, lớp, đánh dấu lồng nhau hoặc biểu định kiểu đầy đủ hơn.

Bỏ qua chuyển đổi thủ công

Chuyển đổi bất kỳ trang trực tiếp nào thành Tailwind CSS sạch

Tailfind mang trình chuyển đổi đến trình duyệt của bạn, do đó bạn có thể nắm bắt giao diện người dùng sản xuất trực tiếp từ trang bạn đang xem.

Ảnh chụp màn hình ứng dụng