3️⃣ Bảng cheat CSS Tailwind
– Csaba Kissi [@csaba_kissi] ngày 13 tháng 12 năm 2021
Sử dụng công cụ tương tác này làm bảng gian lận để xem và tìm kiếm tất cả tên lớp từ Tailwind CSS, khung CSS ưu tiên tiện ích phổ biến nhất thế giới. https. //t. ảnh co/A3OYq6hrgN. Twitter. com/SPBzxNQO4X
Tailwind CSS có một hệ thống thiết kế tích hợp đẹp mắt, có sẵn trong hộp với bảng màu được lựa chọn cẩn thận, các mẫu định cỡ cho các kiểu như chiều rộng/chiều cao và phần đệm/lề cho một thiết kế thống nhất, cũng như các điểm dừng phương tiện để tạo phản ứng nhanh . Hệ thống thiết kế này có thể được tùy chỉnh và mở rộng để tạo hộp công cụ chính xác về phong cách mà dự án của bạn cần
Tru Narla hay còn được biết đến với cái tên mewtru ↗ đã có một bài nói chuyện tuyệt vời về cách xây dựng hệ thống thiết kế bằng Tailwind CSS ↗.
Đảm bảo bạn đã cài đặt plugin trình chỉnh sửa cho Tailwind để cải thiện trải nghiệm viết Tailwind của mình
- Tiện ích mở rộng VSCode ↗
Các lớp CSS của Tailwind có thể hơi lộn xộn, vì vậy cần phải có một trình định dạng cho các lớp. Plugin Tailwind CSS Prettier ↗ sắp xếp các lớp theo thứ tự sao cho các lớp khớp với gói css đã xuất. Khi chọn Tailwind trong CLI, chúng tôi sẽ cài đặt và cấu hình cái này cho bạn.
Việc thêm các lớp có điều kiện bằng cách sử dụng các bậc ba có thể rất lộn xộn và khó đọc. Các gói này giúp tổ chức các lớp của bạn khi sử dụng một số logic có điều kiện
Cam kết này không thuộc về bất kỳ nhánh nào trên kho lưu trữ này và có thể thuộc về một nhánh bên ngoài kho lưu trữ
Bạn không thể thực hiện hành động đó vào lúc này
Bạn đã đăng nhập bằng tab hoặc cửa sổ khác. Tải lại để làm mới phiên của bạn. Bạn đã đăng xuất trong một tab hoặc cửa sổ khác. Tải lại để làm mới phiên của bạn
Màu sắc. trong suốt, hiện tại, đen, trắng, xám, đỏ, cam, vàng, xanh lá cây, xanh mòng két, xanh lam, chàm, tím, hồng
khoảng cách. 0. 1. 2. 3. 4. 5. 6. 8. 10. 12. 16. 20. 24. 32. 40. 48. 56. 64. px
Biến thể được hỗ trợ. phản ứng nhanh nhẹn. di chuột nhóm. tập trung vào bên trong. đầu tiên. Cuối cùng. số lẻ. thậm chí. bay lượn. tiêu điểm. tích cực. đã đến thăm. tàn tật. chuyển động an toàn. giảm chuyển động
Tailwindcss-cheatsheet [v3. 0]Một trang tính Tailwindcss rất thanh lịch và hữu ích
- Tailwindcss-cheatsheet-3
- Tailwindcss-cheatsheet-2. 1
Nhật ký
v3. 0 - 12 tháng 11 năm 2022
- đã cập nhật lên Tailwindcss v3
- Đã thêm tính năng đánh dấu văn bản
- thay đổi thiết kế
- Tái cấu trúc mã nguồn
v2. 1 - 9 tháng 10 năm 2021
- Cải thiện thẩm mỹ rất nhiều
- Tái tạo & tái cấu trúc dự án bằng cách sử dụng
react
vớivite
. Nó đã sử dụngvuejs
trước đó - Thực hiện phản hồi cao bằng cách sử dụng
tailwind