CSS to Tailwind Converter

Tính năng nổi bật

• Đọc cả file CSS nhiều selector lẫn một cụm khai báo rời không có dấu ngoặc nhọn
• Ánh xạ khoảng cách theo thang 4px, giá trị lệch thang tự sinh arbitrary value dạng ngoặc vuông
• Quy màu về bảng màu Tailwind gần nhất kèm cảnh báo mức lệch, có công tắc tắt để giữ đúng mã hex gốc
• Nhận diện media query min-width và sinh tiền tố sm, md, lg, xl, 2xl tương ứng
• Nhận diện hover, focus, active, disabled, before, after và các pseudo-class khác thành tiền tố trạng thái
• Tách cú pháp rút gọn của margin, padding, border, flex, transition, transform thành nhiều class riêng
• Liệt kê từng khai báo không chuyển được kèm lý do và hướng xử lý thay thế
• Nút chép riêng cho từng selector và nút chép toàn bộ kết quả một lần

Vì sao nên dịch bằng bảng ánh xạ thay vì tra tay từng dòng

Khi chuyển một dự án đang dùng CSS viết tay sang Tailwind, phần mất thời gian nhất không phải là học class mới mà là tra đi tra lại cùng một nhóm giá trị. Bạn nhìn thấy padding 24px, phải nhớ 24 chia 4 bằng 6 nên là p-6. Thấy màu #3b82f6, phải nhớ đó là blue-500 hay blue-600. Thấy font-size 18px, phải nhớ đó là text-lg. Mỗi lần tra chỉ mất vài giây nhưng một file style vài trăm dòng thì cộng lại thành cả buổi, và càng về sau càng dễ nhầm vì mắt đã mỏi. Nguy hiểm hơn là những giá trị gần đúng: 22px không có trên thang nào, #3c83f7 không phải blue-500 mà chỉ gần giống, 0.28s không nằm trong thang duration. Nếu tra tay bạn sẽ có xu hướng làm tròn cho tiện và giao diện lệch đi một chút ở khắp nơi mà không ai chỉ ra được chỗ nào sai. Bảng ánh xạ chạy tự động thì không mệt, không làm tròn ngầm, và mỗi lần phải làm tròn nó đều nói cho bạn biết.

Lợi ích khi sử dụng

• •Rút ngắn việc chuyển đổi một file style dài từ hàng giờ xuống vài phút
• •Không bao giờ im lặng làm tròn giá trị, mọi sai lệch đều hiện thành cảnh báo
• •Giữ được đúng mã màu thương hiệu khi cần, chỉ bằng một công tắc
• •Thấy ngay danh sách khai báo phải xử lý tay nên không sót phần nào khi dọn file cũ
• •Chạy hoàn toàn trên trình duyệt nên dán được cả CSS của dự án nội bộ mà không lo gửi mã ra ngoài

Cách chuyển một khối CSS sang class Tailwind

1. 1Dán khối CSS vào ô bên trái, có thể dán cả file nhiều selector, cả khối media query, hoặc chỉ một cụm khai báo rời.
2. 2Kết quả hiện ngay ở ô bên phải, chia theo từng selector kèm chuỗi class và các nhãn biến thể được sinh ra.
3. 3Xem khối cảnh báo bên dưới để biết giá trị nào bị làm tròn hoặc phải chuyển thành arbitrary value.
4. 4Xem khối khai báo không chuyển được để biết phần nào phải giữ lại trong file CSS hoặc khai báo trong tailwind.config.
5. 5Tắt công tắc quy màu nếu dự án của bạn yêu cầu đúng mã màu thương hiệu, khi đó công cụ giữ nguyên hex bằng arbitrary value.
6. 6Bấm nút chép của từng selector để dán thẳng vào thuộc tính class trong file giao diện.

Thang spacing 4px, và vì sao một số giá trị buộc phải thành arbitrary value

Toàn bộ khoảng cách trong Tailwind dựng trên một đơn vị gốc là 0.25rem, tương đương 4px ở cỡ chữ gốc mặc định. Con số đứng sau tên class chính là số lần của đơn vị đó: p-1 là 4px, p-2 là 8px, p-4 là 16px, p-6 là 24px, p-8 là 32px. Thang này không liên tục ở đoạn lớn, sau 12 thì nhảy sang 14, 16, 20, 24 rồi 28, nghĩa là bước nhảy tăng dần chứ không phải mọi bội số của 4 đều có class. Ngoài ra còn ba giá trị đặc biệt nằm ngoài quy luật: px đúng bằng 1px, 0.5 bằng 2px, và 1.5 bằng 6px, dùng cho những chỗ cần đường kẻ mảnh. Khi bạn dán vào một giá trị như 22px, 15px hay 30px, công cụ không tìm thấy điểm nào trên thang nên sinh ra arbitrary value dạng ngoặc vuông và ghi kèm cảnh báo. Đây không phải lỗi mà là tín hiệu để bạn quyết định: hoặc chỉnh thiết kế về 20px hay 24px cho khớp thang, hoặc giữ nguyên nếu con số đó thực sự có lý do. Điều nên tránh là để rải rác hàng chục arbitrary value khác nhau, vì lúc đó bạn mất luôn cái lợi lớn nhất của Tailwind là giao diện tự đồng nhất theo một thang chung.

Màu sắc: khi nào chấp nhận lệch để về bảng màu, khi nào phải giữ nguyên mã hex

Bảng màu mặc định gồm hai mươi hai tông màu, mỗi tông mười một mức đậm nhạt từ 50 tới 950, cộng thêm đen, trắng và trong suốt. Công cụ đọc mã màu bạn nhập ở mọi dạng thường gặp là hex ba hoặc sáu ký tự, rgb, rgba, hsl, hsla và tên màu chuẩn, rồi tìm ô gần nhất trong bảng bằng khoảng cách trong không gian RGB. Nếu trùng khít, class sinh ra sạch sẽ, không có cảnh báo. Nếu chỉ gần giống, công cụ đưa ra token gần nhất kèm con số cho biết lệch bao nhiêu đơn vị, và nếu lệch quá xa thì nó tự bỏ ý định quy về bảng màu mà giữ nguyên hex bằng arbitrary value. Cách quyết định thực tế như sau: với màu nền phụ, màu viền mờ, màu chữ phụ, việc lệch vài đơn vị RGB không ai nhìn ra nên cứ để công cụ quy về bảng màu cho gọn. Với màu thương hiệu chính, màu logo, màu nút gọi hành động thì tuyệt đối không được lệch, hãy tắt công tắc quy màu để giữ đúng hex, và bước tiếp theo là khai báo màu đó vào tailwind.config để dùng như một token có tên thay vì rải hex khắp giao diện.

Media query và pseudo-class được đổi thành tiền tố như thế nào

Trong CSS thuần bạn tách trạng thái ra thành một khối riêng, còn Tailwind gộp nó vào chính chuỗi class bằng tiền tố ngăn cách bởi dấu hai chấm. Công cụ đọc khối media query, tìm điều kiện min-width rồi so với năm điểm ngắt mặc định là 640, 768, 1024, 1280 và 1536 pixel. Trùng thì sinh tiền tố sm, md, lg, xl hoặc 2xl. Không trùng thì sinh tiền tố tùy chỉnh dạng min kèm ngoặc vuông và nhắc bạn rằng dự án đang dùng điểm ngắt riêng, nên cân nhắc khai báo lại trong tailwind.config cho thống nhất. Điều kiện max-width được đổi sang họ tiền tố max, còn prefers-color-scheme dark thành dark và prefers-reduced-motion thành motion-reduce. Với selector, công cụ quét các pseudo-class quen thuộc và đổi thành tiền tố tương ứng: hover, focus, focus-visible, focus-within, active, disabled, checked, first, last, odd, even, before, after. Khi một selector vừa nằm trong media query vừa có pseudo-class, các tiền tố được nối lại theo đúng thứ tự Tailwind chấp nhận. Một điểm cần nhớ là Tailwind áp dụng nguyên tắc thiết kế cho màn hình nhỏ trước, nên khai báo không tiền tố là mặc định cho mọi cỡ màn hình, còn md chỉ có hiệu lực từ 768 pixel trở lên chứ không phải chỉ trong khoảng 768 tới 1024.

Những khai báo không chuyển được và cách xử lý từng loại

Có bốn nhóm khai báo mà bảng ánh xạ không thể tự lo, và công cụ liệt kê tất cả ra thay vì bỏ qua. Nhóm thứ nhất là hoạt ảnh: khai báo animation gắn với một khối keyframes riêng, mà keyframes thì bắt buộc phải khai báo trong tailwind.config phần keyframes rồi đặt tên cho nó ở phần animation, không có class dựng sẵn nào thay được. Nhóm thứ hai là các cú pháp rút gọn gộp quá nhiều lớp, điển hình là background gộp cả ảnh, vị trí, kích thước và độ lặp trong một dòng, hoặc font gộp cả cỡ chữ, chiều cao dòng và bộ chữ; cách xử lý là tách chúng thành từng khai báo con rồi dán lại. Nhóm thứ ba là những thuộc tính Tailwind cố tình không phủ vì ít dùng, khi đó bạn có hai lựa chọn là giữ nguyên trong file CSS hoặc viết arbitrary property dạng tên thuộc tính và giá trị đặt trong ngoặc vuông. Nhóm thứ tư là các khối at-rule như font-face, import, supports hay chính khối keyframes, vốn không thuộc phạm vi của class tiện ích và phải nằm lại trong file CSS toàn cục. Danh sách này thường ngắn hơn bạn nghĩ, và chính nó cho biết phần CSS nào của dự án thực sự cần viết tay.

Sau khi có chuỗi class rồi thì làm gì tiếp

Kết quả công cụ trả về là bản dịch trung thành từng khai báo, chưa phải là chuỗi class bạn nên giữ nguyên mãi mãi. Có ba việc nên làm ngay sau đó. Thứ nhất là dọn phần dư: CSS viết tay hay chứa những khai báo lặp lại giữa quy tắc chung và quy tắc riêng, khi dịch sang class chúng thành các class cùng đặt một thuộc tính và bạn chỉ cần giữ lại một. Thứ hai là gom lại theo hướng dùng lại: nếu cùng một cụm class lặp ở nhiều nơi, hãy tách nó thành một component thay vì sao chép chuỗi, vì đó mới là cách Tailwind được thiết kế để dùng. Thứ ba là đẩy các giá trị đặc thù lên tệp cấu hình: mọi arbitrary value xuất hiện quá ba lần đều là dấu hiệu dự án của bạn có một token riêng chưa được đặt tên, hãy khai báo nó vào tailwind.config để lần sau viết bằng tên thay vì viết bằng con số. Cuối cùng, sắp xếp lại chuỗi class theo thứ tự chuẩn giúp người sau đọc nhanh hơn và giảm hẳn khả năng hai người sửa cùng một dòng gây xung đột khi hợp nhất mã nguồn.

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

Từ khóa liên quan

• chuyển css sang tailwind
• css to tailwind converter
• đổi css thuần sang class tailwind
• thang spacing tailwind 4px
• bảng màu tailwind mặc định
• arbitrary value tailwind
• tiền tố responsive tailwind sm md lg
• tiền tố hover focus tailwind
• chuyển media query sang tailwind
• chuyển padding css sang class tailwind
• tìm màu tailwind gần nhất với mã hex
• chuyển box-shadow sang shadow tailwind
• chuyển border-radius sang rounded tailwind
• chuyển transition sang tailwind
• chuyển transform sang tailwind
• chuyển gradient css sang tailwind
• khai báo keyframes trong tailwind config
• migrate css sang tailwind
• công cụ chuyển css sang tailwind miễn phí
• class tailwind tương đương css