Sân Chơi Tailwind
Viết HTML bằng tiện ích Tailwind CSS v4 và biên dịch trực tiếp trong trình duyệt.
Sân Chơi Tailwind là gì?
Là trình soạn thảo miễn phí ngay trong trình duyệt, nơi bạn viết HTML bằng các lớp tiện ích Tailwind CSS v4 và xem kết quả biên dịch trong khung xem trước trực tiếp. Trình biên dịch Tailwind v4 chính thức đã được đóng gói sẵn trong trang, không cần cài đặt gì.
Mã của tôi có được tải lên đâu không?
Không. Việc biên dịch diễn ra hoàn toàn trong trình duyệt của bạn bằng bản sao cục bộ của động cơ Tailwind. HTML không bao giờ rời khỏi trang và bản nháp chỉ được lưu trong localStorage của trình duyệt.
Trình này dùng phiên bản Tailwind nào?
Dùng Tailwind CSS v4, phiên bản chính mới nhất, qua trình biên dịch chính thức @tailwindcss/browser. Mọi tiện ích cốt lõi, biến thể và chủ đề mặc định đều hoạt động, kể cả giá trị tùy ý trong ngoặc vuông.
Khung xem trước trực tiếp hoạt động thế nào?
HTML của bạn được đưa vào iframe cách ly cùng trình biên dịch. Sau mỗi lần chỉnh sửa, các tiện ích được biên dịch lại sau 500 mili-giây, nên gõ phím mượt mà và khung xem trước luôn cập nhật.
Làm sao thử kiểu giao diện tối?
Bật công tắc «Xem trước tối». Nó thêm lớp dark vào tài liệu xem trước và trình biên dịch gắn biến thể dark: với lớp đó, nên các tiện ích như dark:bg-slate-900 phản hồi ngay lập tức.
Có thể xem CSS mà Tailwind tạo ra không?
Có. Bảng «CSS đã biên dịch» dưới các trình soạn hiển thị chính xác stylesheet được tạo ra cho mã đánh dấu của bạn, và nút «Sao chép CSS» chép nó vào bảng tạm.
Tệp HTML tải xuống chứa những gì?
Nút Tải HTML tạo ra tệp độc lập gồm mã đánh dấu của bạn cùng CSS đã biên dịch được nhúng trong phần head, nên trang hiển thị đúng khi ngoại tuyến, không cần liên kết CDN hay Internet.
Có mẫu sẵn không?
Có. Bộ chọn mẫu cung cấp mục hero, lưới thẻ phản hồi và bảng giá ba cấp, tất cả viết bằng tiện ích v4 mới nhất, kèm điểm khởi đầu trống tối giản.
Cách sử dụng Sân Chơi Tailwind
Sân chơi này chạy trình biên dịch trình duyệt chính thức của Tailwind CSS v4 hoàn toàn trên máy của bạn. Bạn gõ HTML thuần với các lớp tiện ích ở bên trái, trình biên dịch tạo CSS tương ứng trong iframe xem trước được cách ly, và bảng bên dưới hiển thị chính xác stylesheet được tạo ra. Không tải lên gì: trình biên dịch, mã của bạn và bản nháp đều ở lại trong trình duyệt.
- Chọn điểm khởi đầu trong bộ chọn 「Mẫu」: Hero, lưới thẻ, bảng giá hoặc Trống; văn bản của bạn cũng được khôi phục tự động giữa các lần truy cập.
- Chỉnh sửa HTML trong trình soạn thảo bên trái. Nhấn Tab sẽ chèn hai dấu cách, và bản xem trước biên dịch lại khoảng 500 ms sau khi bạn ngừng gõ.
- Bật tắt 「Ngắt dòng mềm」 để điều khiển cách ngắt dòng, và bộ chọn cỡ chữ để đặt cỡ chữ của trình soạn thảo.
- Bật 「Xem trước tối」 để thêm lớp "dark" vào tài liệu xem trước; các tiện ích như dark:bg-slate-900 phản hồi ngay lập tức.
- Đọc các quy tắc được tạo trong bảng 「CSS đã biên dịch」 và sao chép bằng 「Sao chép CSS」 khi cần.
- Dùng 「Sao chép HTML」 cho mã gốc, hoặc 「Tải HTML」 để nhận tệp độc lập có nhúng CSS đã biên dịch, sẵn sàng mở ngoại tuyến.
Tệp tải về chỉ có style thật sau ít nhất một lần biên dịch, nên hãy để bản xem trước kết xuất một lần trước khi xuất. Để giảm CSS được tạo, hãy xóa các phần tử không dùng khỏi mẫu — bảng luôn phản ánh chính xác những gì mã hiện tại của bạn cần.
Công cụ liên quan
- Sân chơi Code Sân chơi HTML, CSS và JavaScript trực tuyến với xem trước trực tiếp, trình soạn thảo có số dòng và console thu được. Thử đoạn mã ngay lập tức và tải kết quả thành một tệp HTML - hoàn toàn trong trình duyệt.
- Trình tạo CSS Grid Trình tạo CSS Grid trực quan miễn phí với xem trước trực tiếp. Thiết kế bố cục lưới responsive tương tác và xuất mã CSS sẵn sàng sản xuất ngay.
- Máy tính Chmod Máy tính chmod trực tuyến miễn phí để trực quan hóa và tính toán quyền tệp Linux với hộp kiểm. Chuyển đổi ngay lập tức giữa ký hiệu số (755, 644) và tượng trưng (rwxr-xr-x). Hỗ trợ quyền đặc biệt như setuid, setgid, sticky bit.
- Bảng ASCII Tham khảo mã hóa ký tự ASCII đầy đủ với mã thập phân, thập lục phân, bát phân, nhị phân, thực thể HTML và mô tả ký tự. Tìm kiếm và lọc tức thì.
- Trình kiểm tra yêu cầu HTTP Kiểm tra API REST trực tiếp trong trình duyệt. Gửi yêu cầu GET, POST, PUT, DELETE với header, body và tham số tùy chỉnh. Xem trạng thái, header và body JSON phản hồi ngay lập tức.
- Trình tạo .htaccess Tạo quy tắc .htaccess Apache cho chuyển hướng, viết lại, tiêu đề bảo mật, bộ nhớ đệm và hơn thế nữa.
- Trình tạo Robots.txt Trình tạo robots.txt trực tuyến miễn phí. Tạo và tùy chỉnh tệp robots.txt để kiểm soát việc thu thập dữ liệu của công cụ tìm kiếm, quản lý quyền truy cập của trình thu thập và tối ưu hóa SEO cho trang web của bạn.
- Trình tạo Sitemap Trình tạo sitemap XML trực tuyến miễn phí. Thêm URL, đặt mức ưu tiên và tần suất, tạo sitemap SEO ngay lập tức.