Bảng cheat CSS Tailwind GitHub

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

Bảng cheat CSS Tailwind GitHub

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ới vite. Nó đã sử dụng vuejs trước đó
  • Thực hiện phản hồi cao bằng cách sử dụng tailwind

Tailwind CSS có thực sự tốt không?

Có nhiều lợi ích khi sử dụng Tailwind CSS thay vì sử dụng bộ giao diện người dùng truyền thống. Chúng ta hãy đi qua một số lợi ích quan trọng. Đầu tiên, Tailwind CSS cung cấp cho bạn kích thước tệp CSS nhỏ hơn . Tạo kiểu cho ứng dụng web của bạn bằng CSS thuần túy yêu cầu bạn viết nhiều CSS hơn khi bạn thêm nhiều tính năng và thành phần hơn vào ứng dụng web của mình.

Tailwind CSS có tốt cho các dự án lớn không?

Một số nhược điểm khi sử dụng Tailwind CSS bao gồm. Phần đánh dấu của bạn có thể trông lộn xộn đối với các dự án lớn vì tất cả các kiểu đều nằm trong tệp HTML . Không dễ học nếu bạn không hiểu rõ về CSS. Bạn buộc phải xây dựng mọi thứ từ đầu, bao gồm cả các yếu tố đầu vào của bạn.

CSS Tailwind có thể bảo trì được không?

Tailwind CSS mô tả điều này như sau. Tailwind khuyến khích quy trình làm việc ưu tiên tiện ích, trong đó các thiết kế được triển khai ban đầu chỉ bằng các lớp tiện ích để tránh trừu tượng hóa quá sớm. Trích xuất các thành phần – Xử lý sự trùng lặp và duy trì các dự án ưu tiên tiện ích .

CSS Tailwind có nhanh không?

Tailwind CSS giúp viết và duy trì mã ứng dụng của bạn nhanh hơn . Bằng cách sử dụng khung ưu tiên tiện ích này, bạn không cần phải viết CSS tùy chỉnh để tạo kiểu cho ứng dụng của mình. Thay vào đó, bạn có thể sử dụng các lớp tiện ích để kiểm soát phần đệm, lề, màu, phông chữ, bóng đổ, v.v. của ứng dụng của bạn.