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
Frontend dev, UI/UX designer, ai cần prototype visual nhanh hoặc sinh CSS chuẩn copy-paste cho dự án Tailwind/React/Vue.
Câu hỏi thường gặp
CSS sinh ra có dùng được với Tailwind không?
Có. Output là CSS chuẩn vanilla, paste vào file .css bất kỳ. Nếu dự án dùng Tailwind, có thể đặt vào layer @utilities hoặc theme override.
Có hỗ trợ trình duyệt cũ không?
Output dùng cú pháp CSS modern (custom properties, grid, gap). Hoạt động tốt trên Chrome/Firefox/Safari 2020+. IE11 KHÔNG được hỗ trợ.
Công cụ liên quan
Xem tất cả công cụ →Color Picker
Pick HEX/RGB/HSL, slider RGB, 12 màu mẫu, gợi ý tên Tailwind gần nhất.
MỚISVG → React/JSX
Convert SVG sang React component. camelCase attribute, currentColor, TypeScript types, size/color props.
MỚICSS Animation Builder
Visual builder cho CSS animation. 10 preset (fadeIn, bounce, pulse, spin, shake…). Tinh chỉnh duration, easing, iteration.
MỚICSS Filter Builder
Visual builder cho CSS filter — blur, brightness, sepia, hue-rotate, drop-shadow. 8 preset (Vintage, Polaroid, Noir…).