Tailwind ↔ CSS Converter
Convert giữa Tailwind utility classes và CSS thuần — 2 chiều. Hỗ trợ ~200 utility (spacing, color, flex, grid, typography). Phù hợp migrate hoặc học Tailwind.
Convert giữa Tailwind utility classes và CSS thuần. Hỗ trợ ~200 utility phổ biến (spacing, color, flex, grid, typography). Phù hợp khi migrate dự án hoặc học Tailwind.
Khi nào cần convert?
- Học Tailwind: paste CSS quen thuộc → xem Tailwind class tương ứng. Cách nhanh nhất nắm bắt utility names.
- Migrate dự án: codebase cũ dùng CSS-in-JS / Sass → Tailwind. Convert từng component.
- Code review: đồng nghiệp paste CSS → bạn check xem có Tailwind class gọn hơn không.
- Documentation: viết blog/docs về styling — show cả 2 phong cách cho người đọc.
- Email template: email không dùng được Tailwind class → convert sang inline CSS.
Tool support utility nào?
- Layout: display (block/flex/grid/hidden), position, flex-direction, items-*, justify-*.
- Spacing: p-*, m-*, gap-* (theo scale 0-96).
- Sizing: w-*, h-* (full, screen, auto, scale).
- Typography:
text-{size},text-{color},font-{weight}, text-align. - Colors: bg-*, text-*, border-* (palette gray, red, blue, green, yellow, amber, orange, purple, pink — 50/100/.../900).
- Borders: border,
border-{n}, rounded,rounded-{xs/sm/md/lg/xl/2xl/3xl/full}. - Effects: shadow,
opacity-{n}. - Misc: cursor, overflow, z-index.
Hạn chế
- Responsive prefix (
sm:,md:) chưa hỗ trợ — phải xử lý tay. - Dark mode (
dark:) tương tự. - Custom config (color palette riêng) không nhận — chỉ palette mặc định Tailwind.
- Arbitrary value
[24px]phải tự convert.
Phù hợp với ai
Lập trình viên fullstack/backend/devops — debug JWT, format JSON/SQL, parse cURL, tính subnet CIDR, vẽ diagram Mermaid, viết commit chuẩn… Toolkit dùng hằng ngày trong terminal & code editor.
Câu hỏi thường gặp
Code/token tôi paste có gửi đi đâu không?
Không. Tất cả công cụ dev của TopDev chạy 100% client-side — JWT, SQL, JSON, cURL, regex… đều xử lý trong trình duyệt. Bạn có thể tắt mạng để kiểm chứng. Phù hợp để paste token nội bộ, query database production, key API.
Có hỗ trợ offline / cài thành PWA không?
Tool đã chạy được offline sau lần load đầu tiên. PWA installable đang nằm trong roadmap — hiện tại bạn có thể bookmark trang và dùng khi mất mạng.
Công cụ liên quan
Xem tất cả công cụ →JWT Decoder
Decode JWT token, xem header/payload/claims với thời gian dễ đọc.
MỚISo sánh văn bản (Diff)
Paste 2 đoạn text/code → highlight khác biệt từng từ/dòng/ký tự. Phù hợp diff output AI.
MỚIJSON Schema Generator
Tạo JSON Schema (Draft-07) từ JSON mẫu — dùng cho structured output LLM, validate API.
MỚIFormat JSON
Format / minify / validate JSON. Sort key A-Z, custom indent, phím tắt Ctrl+Enter.