Xây dựng các thành phần React tùy chỉnh với Tailwind CSS. Tạo nút, đầu vào, vùng văn bản, danh sách chọn và đường dẫn với xem trước thời gian thực và mã được tạo sẵn để sử dụng trong các dự án của bạn.
Xây dựng các thành phần React với Tailwind CSS và xem bản xem trước trực tiếp
<button className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer" > Button </button>
Trình Tạo Thành Phần React Tailwind là một trình chỉnh sửa trực quan mạnh mẽ giúp bạn tạo các thành phần React tùy chỉnh với Tailwind CSS ngay lập tức. Công cụ trình tạo thành phần React Tailwind miễn phí này cho phép các nhà phát triển và nhà thiết kế xây dựng, tùy chỉnh và xuất các thành phần giao diện người dùng sẵn sàng cho sản xuất mà không cần viết mã CSS thủ công. Với trình tạo React Tailwind có xem trước trực tiếp của chúng tôi, bạn có thể xem các thay đổi theo thời gian thực khi thiết kế nút, biểu mẫu, đầu vào và các thành phần điều hướng bằng cách sử dụng framework CSS tiện ích đầu tiên của Tailwind.
Trình tạo thành phần React Tailwind của chúng tôi hỗ trợ tạo các yếu tố giao diện người dùng thiết yếu bao gồm nút, đầu vào văn bản, vùng văn bản, menu thả xuống chọn và điều hướng bánh mì vụn. Mỗi thành phần React có thể được tùy chỉnh hoàn toàn bằng các lớp tiện ích Tailwind CSS cho màu sắc, khoảng cách, kiểu chữ, đường viền và thiết kế có khả năng phản hồi - tất cả với xem trước trực tiếp ngay lập tức cập nhật động khi bạn thay đổi các thuộc tính. Hoàn hảo cho việc nhanh chóng tạo mẫu và phát triển thành phần.
Bắt đầu bằng cách chọn loại thành phần bạn muốn xây dựng từ các tùy chọn có sẵn:
Mỗi loại thành phần có tập hợp các thuộc tính có thể tùy chỉnh riêng của nó sẽ xuất hiện trong bảng thuộc tính.
Sau khi chọn một loại thành phần, bạn có thể tùy chỉnh ngoại hình và hành vi của nó bằng cách sử dụng bảng thuộc tính. Các thuộc tính phổ biến bao gồm:
Đối với các loại thành phần cụ thể, có sẵn các thuộc tính bổ sung:
Khi bạn điều chỉnh các thuộc tính, xem trước trực tiếp sẽ cập nhật theo thời gian thực, hiển thị chính xác cách thành phần của bạn sẽ trông. Bạn cũng có thể:
Một khi bạn hài lòng với thành phần của mình, công cụ tự động tạo ra mã React tương ứng với các lớp Tailwind CSS. Bạn có thể:
Nút là các yếu tố giao diện người dùng thiết yếu cho các tương tác của người dùng. Với trình tạo của chúng tôi, bạn có thể tạo các kiểu nút khác nhau:
Các Tùy Chọn Tùy Chỉnh Chính:
Ví Dụ Mã Được Tạo:
1<button
2 className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 focus:outline-none"
3>
4 Gửi
5</button>
6Đầu vào văn bản cho phép người dùng nhập văn bản một dòng trong các biểu mẫu. Trình tạo của chúng tôi giúp bạn tạo các đầu vào phù hợp với hệ thống thiết kế của bạn:
Các Tùy Chọn Tùy Chỉnh Chính:
Ví Dụ Mã Được Tạo:
1<input
2 type="text"
3 className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
4 placeholder="Nhập tên của bạn"
5 required
6/>
7Vùng văn bản được sử dụng để nhập văn bản đa dòng, chẳng hạn như nhận xét hoặc mô tả:
Các Tùy Chọn Tùy Chỉnh Chính:
Ví Dụ Mã Được Tạo:
1<textarea
2 className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
3 placeholder="Nhập tin nhắn của bạn"
4 rows={4}
5></textarea>
6Menu chọn thả xuống cho phép người dùng chọn từ một danh sách các tùy chọn:
Các Tùy Chọn Tùy Chỉnh Chính:
Ví Dụ Mã Được Tạo:
1<select
2 className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
3 required
4>
5 <option value="option1">Tùy Chọn 1</option>
6 <option value="option2">Tùy Chọn 2</option>
7 <option value="option3">Tùy Chọn 3</option>
8</select>
9Bánh mì vụn giúp người dùng hiểu vị trí của họ trong cấp bậc của trang web:
Các Tùy Chọn Tùy Chỉnh Chính:
**
Khám phá thêm các công cụ có thể hữu ích cho quy trình làm việc của bạn