Những thuộc tính CSS nào được nhận diện?

Thang spacing cho padding và margin, màu chữ và nền, display, căn flex, kích thước cùng độ đậm font, border-radius, width và height, position, gap. Phần còn lại rơi xuống class tự do [prop:value].

Nếu giá trị không nằm trong thang chuẩn thì sao?

Bộ chuyển đổi xuất notation tự do như p-[13px] hoặc bg-[#3b82f6]. JIT biên dịch và class vẫn là Tailwind hợp lệ mà không cần chỉnh tay.

Có hiểu biến CSS tùy chỉnh không?

Có. Giá trị var(--token) đi qua trong dấu ngoặc vuông. Biến vẫn cần được khai báo trong theme của tailwind.config hoặc làm custom property trong :root.

Chuyển đổi có lossless không?

Với các pattern thông dụng thì có. Animation, gradient và selector lạ vẫn tồn tại dưới dạng class tự do — chúng sống sót nhưng đôi khi bạn vẫn muốn giữ CSS gốc cho chúng.

Có thể đi vòng cùng công cụ Tailwind-to-CSS không?

Phần lớn có. Utility đơn giản trở về nguyên vẹn, giá trị tự do được giữ nguyên, nhưng khai báo không hỗ trợ vẫn ở dạng tự do khi quay lại.

Có gì được tải lên không?

Không. Toàn bộ quá trình diễn ra trong tab này; nội dung stylesheet không rời khỏi trang.

CSS sang Tailwind — chuyển khai báo sang utility

CSS → utility Tailwind

Riêng tư theo thiết kế — chạy hoàn toàn trong trình duyệt của bạn

Dán khai báo CSS bên trái và sao chép utility Tailwind bên phải. Bộ chuyển đổi ánh xạ các thang chuẩn spacing, màu, typography và layout sang utility nguyên bản, đồng thời rơi về cú pháp dấu ngoặc vuông với những giá trị mà Tailwind không biết sẵn.

Những thuộc tính có thể ánh xạ

Bộ chuyển đổi nắm vững các vùng CSS hàng ngày: spacing cho padding và margin, kích thước cùng độ đậm font, màu (text và bg), display, chiều hướng và canh chỉnh flex, border-radius, width và height, position, gap. Mỗi thứ rơi vào shortcut chuẩn của Tailwind — p-4, text-lg, justify-between — nên đầu ra đọc giống Tailwind tự viết tay.

Vì sao notation tự do lại quan trọng

Codebase thực tế có những giá trị không có shortcut: cỡ chữ tùy chỉnh 13px, màu thương hiệu với hex riêng, gap 1.7rem. Khi gặp chúng, bộ chuyển đổi xuất dạng tự do của Tailwind như text-[13px] hoặc bg-[#3b82f6]. Class vẫn là Tailwind hợp lệ, JIT vẫn xử lý và round-trip qua Tailwind-to-CSS vẫn sạch.

Khi nào sẽ rơi nguyên xi

Selector phức tạp, animation, gradient và keyframes cố tình không được chuyển đổi — chúng thuộc các tầng mà Tailwind hỗ trợ qua plugin hoặc @apply, và mapping heuristic sẽ nói dối về tính đúng đắn. Những khai báo đó xuất nguyên văn trong class [prop:value], để bạn có thể duyệt mà không mất dữ liệu.

Câu hỏi thường gặp

Những thuộc tính CSS nào được nhận diện?: Thang spacing cho padding và margin, màu chữ và nền, display, căn flex, kích thước cùng độ đậm font, border-radius, width và height, position, gap. Phần còn lại rơi xuống class tự do [prop:value].
Nếu giá trị không nằm trong thang chuẩn thì sao?: Bộ chuyển đổi xuất notation tự do như p-[13px] hoặc bg-[#3b82f6]. JIT biên dịch và class vẫn là Tailwind hợp lệ mà không cần chỉnh tay.
Có hiểu biến CSS tùy chỉnh không?: Có. Giá trị var(--token) đi qua trong dấu ngoặc vuông. Biến vẫn cần được khai báo trong theme của tailwind.config hoặc làm custom property trong :root.
Chuyển đổi có lossless không?: Với các pattern thông dụng thì có. Animation, gradient và selector lạ vẫn tồn tại dưới dạng class tự do — chúng sống sót nhưng đôi khi bạn vẫn muốn giữ CSS gốc cho chúng.
Có thể đi vòng cùng công cụ Tailwind-to-CSS không?: Phần lớn có. Utility đơn giản trở về nguyên vẹn, giá trị tự do được giữ nguyên, nhưng khai báo không hỗ trợ vẫn ở dạng tự do khi quay lại.
Có gì được tải lên không?: Không. Toàn bộ quá trình diễn ra trong tab này; nội dung stylesheet không rời khỏi trang.