devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Kiểm tra website

Bộ chuyển CSS sang arbitrary value của Tailwind

Dán CSS và nhận ngay cú pháp ngoặc vuông của Tailwind đúng ngay lần đầu. Khoảng trắng được đổi thành dấu gạch dưới, gợi ý kiểu được thêm vào, còn thuộc tính không được hỗ trợ sẽ được bọc thành arbitrary property.

Cập nhật
Lớp Tailwind




Theo từng thuộc tính

    
 Dữ liệu của bạn không bao giờ rời khỏi máy tính. Mọi xử lý diễn ra 100% cục bộ trong trình duyệt của bạn.
Công cụ này có hữu ích không?0.0 0 lượt đánh giá

    
    
    Dán CSS custom properties và nhận ngay object colors cho tailwind.config.js hoặc khối @theme của Tailwind v4CSS Variables sang Tailwind →
    
    

      
Cách dùng Tạo arbitrary value Tailwind
  1. Dán một hoặc nhiều khai báo CSS (cả khối rule cũng được).
  2. Tùy chọn thêm biến thể như md: hoặc hover:.
  3. Sao chép tất cả lớp cùng lúc, hoặc từng lớp riêng lẻ trong bảng.


Arbitrary value của Tailwind là gì?


Khi thiết kế cần một giá trị không có trong theme Tailwind, bạn có thể viết trực tiếp trong dấu ngoặc vuông: w-[372px], bg-[#1da1f2], grid-cols-[1fr_200px_auto]. Với thuộc tính CSS mà Tailwind hoàn toàn không có utility tương ứng, hãy dùng arbitrary property: [clip-path:polygon(0_0,100%_0,100%_85%,0_100%)].


Các quy tắc cú pháp mà công cụ này xử lý


    

  • Không có khoảng trắng: tên lớp không thể chứa khoảng trắng, nên khoảng trắng được đổi thành dấu gạch dưới — 1fr 200px auto → 1fr_200px_auto. Khoảng trắng sau dấu phẩy sẽ bị xóa.
    • 

  • Gợi ý kiểu: một số utility bị nhập nhằng với biến CSS (text-[var(--x)] là màu hay kích thước?). Công cụ sẽ thêm gợi ý như text-[color:var(--brand)] hoặc text-[length:var(--size)].
    • 

  • !important: được chuyển thành tiền tố !.
    • 

  • Thuộc tính không được hỗ trợ như mask-image hoặc clip-path sẽ được xuất dưới dạng arbitrary property.
    • 



Khi nào không nên dùng arbitrary value


Arbitrary value rất phù hợp cho các trường hợp dùng một lần. Nếu cùng một giá trị xuất hiện ở nhiều nơi, hãy thêm nó vào theme. Với màu sắc, bạn có thể dùng công cụ CSS Variables to Tailwind hoặc Tailwind Color Generator để giữ sự nhất quán và dễ đọc.
Cũng được tìm dưới tên: arbitrary value tailwind, css sang tailwind, tailwind dấu ngoặc vuông, grid-cols-[], arbitrary property tailwind, giá trị tùy chỉnh tailwind, chuyển css sang tailwind.
Các công cụ dùng kèm tốt với Tạo arbitrary value Tailwind
  • Trình tạo Glassmorphism — Thiết kế thẻ kính mờ với thanh trượt xem trước trực tiếp và sao chép CSS tương thích đa trình duyệt, gồm tiền tố -webkit-backdrop-filter và phương án dự phòng cho trình duyệt cũ.
  • Máy tính CSS clamp() — Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện với phóng to, kèm giải thích công thức, xem trước trực tiếp và thang chữ hoặc thang khoảng cách linh hoạt hoàn chỉnh.
  • Định dạng CSS — Chuyển stylesheet đã nén thành CSS dễ đọc, mỗi thuộc tính một dòng và các khối @media được lồng đúng cấu trúc.
  • Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.
Câu hỏi thường gặp
Làm sao để viết khoảng trắng trong arbitrary value của Tailwind?
Dùng dấu gạch dưới: grid-cols-[1fr_auto]. Tailwind sẽ đổi chúng lại thành khoảng trắng. Muốn dùng dấu gạch dưới thật, hãy escape thành \_.
Arbitrary property là gì?
Là lớp có dạng [property:value] dành cho thuộc tính CSS không có utility Tailwind tương ứng, ví dụ [mask-type:luminance].
Công cụ này có dùng được với Tailwind v3 và v4 không?
Có, cú pháp dấu ngoặc giống nhau ở cả hai phiên bản. Tailwind v4 còn hỗ trợ cách viết rút gọn (--var) cho biến CSS.
Vì sao trong class có “color:”?
Đó là gợi ý kiểu. Nó cho Tailwind biết giá trị var() là màu, nên sẽ tạo ra color thay vì font-size.
Tôi có thể cài Tạo arbitrary value Tailwind như một ứng dụng web và dùng khi không có mạng không?
Có. Tạo arbitrary value Tailwind là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.

      
    

    
    
Công cụ liên quan
localCSS Variables sang TailwindChuyển các biến màu :root thành theme Tailwind chỉ với một lần dán. Hỗ trợ tailwind.config.js của Tailwind…localTạo bảng màu TailwindDán một màu thương hiệu và nhận thang màu 11 bước (50 đến 950) được cân bằng, tính theo OKLCH, kèm gợi ý…localTrình tạo GlassmorphismThiết kế thẻ kính mờ với thanh trượt xem trước trực tiếp và sao chép CSS tương thích đa trình duyệt, gồm…localMáy tính CSS clamp()Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện…localĐịnh dạng CSSChuyển stylesheet đã nén thành CSS dễ đọc, mỗi thuộc tính một dòng và các khối @media được lồng đúng cấu…localTrình tạo animation CSSThiết kế animation CSS trên timeline keyframe thực tế. Bắt đầu từ hơn 50 mẫu có sẵn, xem từng khung hình,…