Công cụ chuyển đổi CSS sang Tailwind — Chuyển CSS sang các lớp Tailwind

Khi nào nên sử dụng

• Tìm các tiện ích Tailwind tương ứng với quy tắc CSS hiện có trong quá trình chuyển đổi.
• Học tên lớp Tailwind bằng cách chuyển đổi CSS mà bạn đã biết.

Cách sử dụng

1. Dán các quy tắc CSS.
2. Điều chỉnh giá trị cơ sở rem hoặc cấu hình Tailwind nếu dự án của bạn dùng thiết lập tùy chỉnh.
3. Sao chép các lớp sau @apply vào mã đánh dấu hoặc bảng định kiểu, rồi kiểm tra kết quả trong dự án Tailwind.

.card { display: flex; padding: 1rem; }

.card {
  @apply flex p-4;
}

Chi tiết và giới hạn

Tên lớp và thang giá trị tuân theo Tailwind CSS v3. Không đảm bảo tương thích với cấu hình và cú pháp Tailwind CSS v4.

Giá trị tùy chỉnh, bộ chọn phức tạp và phần tử giả có thể không chuyển đổi được. Không đảm bảo đầu ra sẽ hiển thị giống hệt bản gốc, vì vậy hãy kiểm tra trên trang thực tế.

Trường cấu hình tùy chỉnh được thực thi dưới dạng JavaScript trong trình duyệt. Không dán cấu hình mà bạn không tin cậy.

FAQ

Công cụ liên quan