Cái gì được chuyển đổi?

Utility Tailwind thông dụng cho spacing, màu, typography, flex, position, cùng bất kỳ dạng arbitrary [value] hay [prop:value] nào. Variant chưa được hỗ trợ.

Tại sao cần chọn selector?

Đầu ra là một quy tắc CSS duy nhất. Chọn sẵn selector giúp bạn dán thẳng vào stylesheet không phải đổi tên hay bọc lại.

Variant responsive và hover có hỗ trợ không?

Chưa — cần bao bằng media query hoặc pseudo-class. Loại bỏ các tiền tố md:, hover:, dark: trước khi dán; utility cơ bản round-trip sạch.

Công cụ có biết theme Tailwind của tôi không?

Không. Chúng tôi dùng thang mặc định. Spacing hay màu tùy chỉnh rơi sang dạng arbitrary trong đầu ra, nhưng CSS vẫn hoạt động.

Có thể đưa CSS qua công cụ ngược lại không?

Có. Với utility đơn giản round-trip khớp chính xác; giá trị arbitrary còn nguyên; khai báo không hỗ trợ tiếp tục ở dạng arbitrary.

Đầu vào của tôi có bị tải lên không?

Không. Toàn bộ quá trình ở trong tab này; Toova không thấy danh sách class, selector hay đầu ra của bạn.

Tailwind sang CSS — utility thành quy tắc

Utility Tailwind → CSS

Riêng tư theo thiết kế — chạy hoàn toàn trong trình duyệt của bạn

Dán danh sách class utility Tailwind cùng một selector, và Toova xây quy tắc CSS tương ứng. Class arbitrary như p-[13px] hay [grid-template-columns:1fr_2fr] sẽ được mở ra thành khai báo thô, sẵn sàng đặt vào stylesheet.

Khi nào hướng ngược hữu ích

Đôi khi bạn dựng mẫu bằng Tailwind nhưng phải bàn giao CSS — email marketing, widget bên thứ ba, hoặc một CMS không nạp Tailwind. Bộ chuyển đổi gấp danh sách utility thành một quy tắc với selector bạn chọn, để bạn dán thẳng vào stylesheet mà không cần đổi tên hay làm sạch markup của playground.

Cách giá trị arbitrary trở lại

Class arbitrary của Tailwind giữ giá trị ngay trong tên: p-[13px] tức padding: 13px, [grid-template-columns:1fr_2fr] tức grid-template-columns: 1fr 2fr. Bộ chuyển đổi mở cả hai dạng theo nghĩa đen, nên mọi giá trị bạn mã hóa qua JIT vẫn sống sót không cần thêm bảng ánh xạ.

Giới hạn và round-trip

Các variant responsive (md:flex), variant trạng thái (hover:bg-black) và dark mode (dark:text-white) cần bao bằng media query hoặc pseudo-class nên bộ chuyển đổi chưa xuất ra — hãy bỏ chúng trước khi dán. Token theme (text-brand) rơi về thang mặc định; theme tùy chỉnh sẽ tạo ra fallback arbitrary. Utility cơ bản round-trip sạch cùng công cụ CSS-to-Tailwind.

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

Cái gì được chuyển đổi?: Utility Tailwind thông dụng cho spacing, màu, typography, flex, position, cùng bất kỳ dạng arbitrary [value] hay [prop:value] nào. Variant chưa được hỗ trợ.
Tại sao cần chọn selector?: Đầu ra là một quy tắc CSS duy nhất. Chọn sẵn selector giúp bạn dán thẳng vào stylesheet không phải đổi tên hay bọc lại.
Variant responsive và hover có hỗ trợ không?: Chưa — cần bao bằng media query hoặc pseudo-class. Loại bỏ các tiền tố md:, hover:, dark: trước khi dán; utility cơ bản round-trip sạch.
Công cụ có biết theme Tailwind của tôi không?: Không. Chúng tôi dùng thang mặc định. Spacing hay màu tùy chỉnh rơi sang dạng arbitrary trong đầu ra, nhưng CSS vẫn hoạt động.
Có thể đưa CSS qua công cụ ngược lại không?: Có. Với utility đơn giản round-trip khớp chính xác; giá trị arbitrary còn nguyên; khai báo không hỗ trợ tiếp tục ở dạng arbitrary.
Đầu vào của tôi có bị tải lên không?: Không. Toàn bộ quá trình ở trong tab này; Toova không thấy danh sách class, selector hay đầu ra của bạn.