🎏

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.

Tất cả công cụ

Tailwind classes

CSS

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.